i have problem with caption to make caption appear under each photo when hover over it but thr problem here they appear all on one side one place the left bottom side here the code for HTML

<div id="content2">
<ul style="width: 5020px; height: 600px;">  
<li class="image" style="width: 392px;"><img src="images/pr1x.jpg" ><p class="caption">1st    caption</p></li>
<li class="image" style="width: 392px;"><img src="images/pr2x.jpg" ><p class="caption">2st    caption</p></li>
</ul></div>

here the code for CSS

li.image p.caption {
position:absolute;
display: none;
font-size: 28px;
color: red;
}
li.image:hover p.caption {
display: list-item;
}?
#content2{
width: 150%;
height: 600px;
float:left;
overflow:hidden;
}
#content2 p{
width: 150%;
}
.scrollbar-hor{
background-color: #e5e2de;
height: 24px;
width: 150%;
float:left;             
}
.handle-hor{
height: 25px;
width: 400px;
background: url(http://brafitting.info/images/bar.jpg) no-repeat;
}

plz help ty