arkadaşlar aşağıdaki gibi bi fonksiyonum var bu fonskiyon da sıralanan kategoriler yan yana ve üzerine gelince alt kısımda kategoriye ait resim çıkıyor ben resimin üstte çıkmasını istiyorum bu konuda yardımcı olurmusunuz


function kategoriler()
{
?>
<script>

$(document).ready(function(){

/* burda*/

$(".liste_").mouseover(function(){
$(this).find('.image_').show();

});

$(".liste_").mouseout(function(){
$(this).find('.image_').hide();

});
});

function hesapla(id)
{

var width = Math.floor( $(".dropdown-menu:eq("+id+") li").length) * 52;
console.log(width);
$(".dropdown-menu").css('width', width + "px");
}

</script>
<style>
.navbar-nav {position: relative; }
li.dropdown {position: static;}
.dropdown-menu > li {padding:5px; display: inline-block; }
</style>

<?php
$kategoriSorgu = mysql_query("SELECT * FROM urun_kategori WHERE durum = 1 and sub_id=0 ORDER BY id ASC");
$i = 0;
while( $kategoriSonuc = mysql_fetch_object($kategoriSorgu) )
{

?>

<li class="dropdown" onmouseover="hesapla(<?php echo $i ; ?>)" ><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><?php
echo $kategoriSonuc->kategori_adi; ?><i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<?php
$kategoriSorgu2 = mysql_query("SELECT * FROM urun_kategori WHERE durum = 1 and sub_id={$kategoriSonuc->id} ORDER BY id ASC");
while( $kategoriSonuc2 = mysql_fetch_object($kategoriSorgu2) ){ ?>

<li class="liste_">
<img class="image_" style="display:none; position:fixed; border:5px solid white; padding:5px; margin-top:20px; margin-left:-25px; background-color:white; border-radius:5px; width:150px; height:150px" src="<?php echo $kategoriSonuc2->resim; ?>">
<a title="<?php echo $kategoriSonuc2->kategori_adi; ?>" href="kategori-<?php echo$kategoriSonuc2->seo; ?>">
<div style="clear:both;">
<?php echo $kategoriSonuc2->kategori_adi; ?>
</div>


</a>
</li>

<?php } ?>



</ul>
</li><?php
$i++;}
}