• User Attivo

    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


  • ModSenior

    E se metti un display:block ad

    #menu li ul li?


  • User Attivo

    niente da fare...:?


  • User Attivo

    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.


  • ModSenior

    E se aggiungi un padding-top?


  • User Attivo

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


  • User Attivo
    <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-->
    
    

  • User Attivo

    grazie mille!
    Vedrò di studiarmelo per bene!