สอบถามเกี่ยวกับ hover to show div คะ ว่าจะปรับเปลี่ยนตำแหน่งของ div ที่แสดงตามพื้นที่ของหน้าจออย่างไรคะ

<style type="text/css">
<!--
.recent-items {
    list-style: none;
    margin: 0 auto;
    overflow: hidden;
    height: 377px;
    width: 472px;
    padding-left: 22px;
    padding-top: 11px;
    padding-bottom: 11px;
}
.thumbnail {
    float: left;  
    margin: 7px;
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-weight: inherit;  
    font-style: inherit;  
    font-size: 100%;  
    font-family: inherit;  
    vertical-align: baseline;
}




    #container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container > div:hover + div {
    display: block
}



-->
</style>



<ul class="recent-items" style=" margin-top: 400px; float: left;" >
<?PHP 
    for ($i=0;$i<20;$i++)
        {
?>
            <li id="container" class="thumbnail">
                <div style=" float: left; " >
                    <a href="aa.php">
                        <img border="0" src="http://0.s3.envato.com/files/64860074/small-codecanyon.png" title="" width="80" height="80">
                    </a>
                </div>
                <div style=" border: 1px solid #000; background: #333; padding: 0px 10px 7px; margin-left: 80px; width: 375px; height: 250px; text-align: center; position: absolute; margin-top: -179px;" >B</div>
            </li>
<?PHP
        }
?>
</ul>



<ul class="recent-items" style=" float: left; margin-top: 400px; margin-left: -22px; " >
<?PHP 
    for ($i=0;$i<20;$i++)
        {
?>
            <li id="container" class="thumbnail">
                <div style=" float: left; " >
                    <a href="aa.php">
                        <img border="0" src="http://3.s3.envato.com/files/64866626/thumbnail.jpg" title="" width="80" height="80">
                    </a>
                </div>
                <div style=" border: 1px solid #000; background: #333; padding: 0px 10px 7px; margin-left: -396px; width: 375px; height: 250px; text-align: center; position: absolute; margin-top: -179px;" >B</div>
            </li>
<?PHP
        }
?>
</ul>