Menù a tendina orizzontale a comparsa CSS

[lucaeffe]

Menù a tendina orizzontale a comparsa CSS

Prendendo spunto dal menù di questo sito
http://www.selvanova.com/vini/ita/
sto tentando di ricreare il menu a tendina a comparsa.

Ho visto un po il codice tramite la sorgente pagina e ho impostato in questo modo il mio codice HTML

<div  id="menu">

<ul><!--ul padre-->

<li><a href="#">L'azienda</a>
<ul>
<li><a href="#">La storia</a></li>
<li><a href="#">Le persone</a></li>
<li><a href="#">Mission e Vision</a></li>
</ul>
</li>

<li><a href="#">Prodotti e Marchi</a>
<ul>
<li><a href="#">Categoria1</a></li>
<li><a href="#">Categoria2</a></li>
<li><a href="#">Categoria3</a></li>
<li><a href="#">Categoria4</a></li>
<li><a href="#">Categoria5</a></li>
<li><a href="#">Categoria6</a></li>
<li><a href="#">Categoria7</a></li>
<li><a href="#">Categoria8</a></li>
<li><a href="#">Categoria9</a></li>
<li><a href="#">Categoria10</a></li>
</ul>
</li>

<li><a href="#">Servizi e Tecnologie</a>
<ul>
<li><a href="#">Servizi</a></li>
<li><a href="#">Tecnologie</a></li>
</ul>
</li>

<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Case study</a></li>
</ul>
</li>


<li><a href="#">Testimonials</a>
<ul>
</ul>
</li>

<li><a href="#">Contatti</a>
<ul>
<li><a href="#">Dove siamo</a></li>
<li><a href="#">Calcola il percorso</a></li>
<li><a href="#">Richiedi Info</a></li>
</ul>
</li>

</ul><!--/ul padre-->
</div><!--/menu-->
<!---------------------------------------------------fine menu-->

Poi ho provato a scrivere qualche riga di CSS

/*------------------------------Inizio menu*/
	
#menu{
	     background:url(../img/menu.png);
	     height:66px;
	     width:100%;
	      }
 ul{
}
 li{
        position: relative;
        float: left;
        list-style: none;
} 
 li a{
width:184px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
color:#CCC;
} 
 li a:hover{
background-color: red;
} 


 ul ul{
position: absolute;
top: 30px; 
visibility: hidden;
} 
 ul li:hover ul{
visibility:visible;
} 
		  
		  	  
		  
/*------------------------------fine menu*/