Buondì a tutti, mi consigliereste un modo per risolvere il mio problema? [che non so se è x js o css]

Vorrei un codice che mi permetta, al rollover del mouse su un link, di far apparire una lista [ul]. E che quando, esco col mouse dalla lista, questa scompaia.

Quello che questo codice fa ora è far apparire la lista, ma appena vado su uno dei punti della lista [li], mi da gia la scomparsa del listato.
questo è il codice:
Codice PHP:
<style>
ul.aa{
display: none;                 
list-style: none;
float: left;
color: #a1a1a1;
width: 320px;
float: left;
background: #d6d6d6;                 
}
       
ul.aa li{
width: 110px;
float: left;

}
</style>
<script>
function showDetails(divID)
{     
   document.all[divID].style.display = "block";
}

function hideDetails(divID)
{
   document.all[divID].style.display = "none";
}
</script>


[url=""]prova[/url]

 <ul class="aa"  id='bip' name='bip' onMouseOut="javascript:hideDetails('bip')"'>
            <li >[b]Nuova voce1[/b]

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam[*][b]Nuova voce2[/b]

            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/list] 
Qualche consiglio?