Problema Menù Multilivello in CSS.

[d.force]

Problema Menù Multilivello in CSS.

Salve a tutti!
Ho un problema con un menù verticale multilivello.
Sono quei menù verticali dove - al passaggio del mouse su alcune voci - si apre un secondo menù laterale.

Fino al secondo livello non ci sono problemi sia con IE6 che con FireFox.

I problemi ci sono quando cerco di fare un terzo livello. Sono problemi di visualizzazione.

di seguito posto il codice Html del menù:

<div id="menucomune">
<ul id="navi">

<li>&lt; <a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire.htm">Dove dormire</a>  
<ul>
<li>&lt; <a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/agriturismo_toscana_montespertoli.htm">Agriturismo</a>
<ul>
<li><a href="#">Bianco</a></li>
<li><a href="#">Rosso</a></li>
<li><a href="#">Verde</a></li>
</ul>
</li>
<li><a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/casa_vacanze_toscana_montespertoli.htm">Case per vacanza</a></li>
<li><a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/hotel_toscana_montespertoli.htm">Hotel</a></li>
<li><a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/bed_and_breakfast_toscana_montespertoli.htm">Bed and Breakfast</a></li>
<li><a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/residence_toscana_montespertoli.htm">Residence</a></li>
<li><a href="http://www.visitvaldelsa.com/toscana/montespertoli/dove_dormire/ostello_toscana_montespertoli.htm">Ostello</a></li>
</ul>
</li>
</ul> 

</div>

e il Css

#menucomune{
padding: 0;
margin: auto;
width:200px;
padding:7px;
background-color:#FDF8F2;
border:1px solid #DFDBD0;
}

ul#navi{
border:1px solid #EEE7DD;
}
 ul {
font: normal normal 12px 'Trebuchet MS', sans-serif;
padding: 0;
margin: auto;
list-style: none;
cursor:pointer;
width:198px;
background-color:#F2EEE3;
}
 li {
display: block;
position: relative;
width: 15.2em;
/*height:22px;*/
border-bottom:1px solid;
border-top:1px solid #FFF;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
height:auto;
}

li ul {
display: none;
position: absolute;
top: 0;
left: -16.7em;
border:1px solid #999;
width: 15.2em;
}

li > ul {
top: 0;
left: -16.7em;
border:1px solid;
width: 15.2em;
} 

li ul a{
text-decoration:none;
color:#960;
}
li ul a:hover{
text-decoration:underline;
color:#960;
}

li a{
text-decoration:none;
color:#960;
}
li a:hover{
text-decoration:underline;
color:#960;
}

/*#menucomune li:hover ul { display: block; }*/

li:hover ul, li.over ul{ 
display: block;
}

Qualcuno è così gentile da aiutarmi a correggere il problema di visualizzazione del terzo livello? Per intendersi è quello che nella sezione "agriturismo" visualizza le vosi Bianco, Verde, Rosso.

Grazie in anticipo!!!

d-force