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*/

Il menù funziona l'unica cosa che non mi riesce è quella di mettere le sottovoci in orizzontale.
P.S l'effetto con cui compaiono le sottovoci nel sito che ho linkato sopra si tratta di JS?
Nel sorgente mi sembra di vedere solo due js (jcarousel e Fancybox) che non sembrano per quell'effetto

marcocarrieri

E se metti un display:block ad

#menu li ul li?

lucaeffe

niente da fare...:?

lucaeffe

Sono andato vicino alla soluzione dando

#menu li ul li {
position:absolute;

}

e in effetti le sotto voci del menu si dispongono in orizzontale ma una sopra l'altra e non riesco a distanziarle le une dalle altre.

marcocarrieri

E se aggiungi un padding-top?

lucaeffe

Succede che tutte le voci riunite si spostano tutte insieme dall'alto verso il basso...

microcipcip

<style>
/*------------------------------Inizio menu*/
    
#menu{
         background:url(../img/menu.png);
         height:66px;
         width:100%;
          }
 ul{
}
 li{
        position: relative;
        float: left;
        list-style: none;
} 
 ul 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;
} 
 ul li ul{
    width: 600px;
}     ul li ul.contact{
    width: 400px;
    left: -200px;
} ul li ul li{
    display: inline;
    padding: 0 10px 0;
} ul li ul li a{
    display: inline;
}                    
          
/*------------------------------fine menu*/
</style>
<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 class="contact">
            <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-->

lucaeffe

grazie mille!
Vedrò di studiarmelo per bene!