You Are Here: Home » CSS Tutorials » Come creare un menu css drop down verticale di base

Come creare un menu css drop down verticale di base

Riprendendo il tema dei menu a cascata e seguendo la stessa struttura del primo tutorial per creare un menu css dropdown orizzontale di base, basta modificare leggermente il suo stile css per creare un menu css a cascata verticale.

La marcatura html consiste sempre di una lista non-ordinata e liste innestate per i sub elementi del menu:

<div id="menu">
<ul>
<li><a href="#nogo">Link 1 >></a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2 >></a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a></li>
<li><a href="#nogo">Link 4 >></a>
<ul>
<li><a href="#nogo">Link 4-1</a></li>
<li><a href="#nogo">Link 4-2</a></li>
<li><a href="#nogo">Link 4-3</a></li>
</ul>
</li>
</ul>
</div>

Nel seguente preview, possiamo vedere il nostro menu prima di applicare il stile css:

css drop down vertical preview 1

Per evitare le differenze d’interpretazione tra i browser riguardo i margini e spazi cuscinetti (padding), azzeriamo il tutto per le liste (<ul>) e suoi elementi (<li>):

#menu, #menu ul, #menu li{
padding:0;
margin:0;
}

Al contrario del la versione orizzontale, lo stile css principale viene applicato direttamente agli elementi ‘li’ invece dei link (elementi ‘a’).

  • list-style: none; rimuove la marcatura di default delle liste
  • position: relative; permette di potere di seguito posizionare la lista innestata in rapporto al suo elemento genitori (‘li’ in questo caso)
  • width:120px; e height: 30px; la larghezza e altezza dell’elemento che useremo come pulsante
  • padding:0 20px; spazi cuscinetti sinistro/destro tra il bordo del elemento e il suo contenuto testo
  • background-color: black; il colore di sfondo nero
  • line-height: 30px; valore pare a l’altezza per centrate il contenuto testo verticalmente
  • cursor:pointer; aggiunge a l’elemento il cursore tipico dei link

#menu li{
list-style: none;
position: relative;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
}

Preview del risultato fino adesso:

css drop down verticale preview 2

Con il text-decoration:none; e il color:white; togliamo la sottolineatura dei link e li diamo un colore di testo bianco:

#menu li a{
text-decoration:none;
color: white;
}

E per un minimo d’effetto visivo, cambiamo il colore di sfondo da nero a rosso degli elementi ‘li’ sullo stato hover (quando si passa sopra con il mouse):

#menu li:hover{
background-color:red;
}

Preview del risultato fino adesso:

css drop down vertical preview 3

Rimane di posizionare i sub elementi (ul innestati dentro l’ul principale) in modo assoluto a 160px (la larghezza impostata ai li + 40px padding sinistro/destro – vedi box-model per maggiore informazione) sulla sinistra del loro respettivo elemento genitore (li) e nasconderli in apertura con la proprietà visibility e il valore hidden (nascosto).

#menu ul ul{
position: absolute;
top:0;
left:160px;
visibility:hidden;
}

Finalmente, rendiamo i sub liste con i sub elementi visibile sullo stato hover dei li:

#menu ul li:hover ul{
visibility:visible;
}

Il risultato finale (passa sopra i link con il mouse):

Come spiegato alla fine del articolo sulla creazione d’un menu css dropdown orizzontale di base, questo menu richiede l’aggiunto d’un file .htc per il suo buon funzionamento con Internet Explorer 6, scaricabile gratuitamente sul sito del suo creatore Peter Nederloff e inserito nello stile css con:

body{
behavior: url(csshover2.htc);
}

PS: per utenti di IE6, questo file .htc non è applicato a l’esempio di sopra

Files di questo tutorial da scaricare gratuitamente (incluso file .htc):

  css_menu_dropdown_verticale_di_base.zip (2.7 KiB, 3,462 hits)

Sponsors of this article

About The Author

WebMaster

CEO e amministratore Network Flepstudio.org

Number of Entries : 85

Comments (15)

  • Aalvo

    Kome si modifica o si abbelisce qesto menù?

    Reply
  • Onsitus

    Ciao Aalvo,
    dipende che ne vuoi fare. Un esempio basato su questo tutorial: http://css.flepstudio.org/css-menu/menu-dropdown-colorato-3.html
    Magari ti da qualche idee. Se hai domande piu specifiche, chiedi pure!

    Reply
  • Marcello Oliva

    Ciao, vorrei modificare la mia home page con un effetto di dissolvenza delle immagini (attualmente funziona solo con explorer).
    Ci sono riuscito con
    Ultimate Fade-In Slideshow (v1.51), no problem..

    Il problema è che se inserisco questo oggetto il mio menu a tendina quando evidenziato, viene in parte nascosto (nella parte bassa) dalle foto in dissolvenza. Il problema si risolve abbassando le foto in dissolvenza, ma mi rimane dello spazio vuoto..

    Non si riesce a dare una caratteristica al css del menu, per cui rimanga sempre in evidenza su ogni oggetto sottostante?

    grazie, Marcello

    Reply
    • Onsitus

      Ciao Marcello, sarebbe per la home page del sito marcellooliva.com?
      Se si, non ho incontrato problemi tra menu dropdown e slideshow.
      Se no, sarebbe da cambiare i z-index. Uno più alto per il menu, uno più basso per il slideshow.

      Reply
  • Marcello Oliva

    Ciao Onsitus, grazie per la risposta.
    Si era per http://www.marcellooliva.com.
    Lo hai visualizzato correttamente in quanto probabilmente lo avevo già messo a posto…. ;-)

    Ho avuto non pochi problemi con i valori dello z-index al fine di visualizzare correttamente il menu su tutti i browser + comuni…. comunque mi sembra di esserci riuscito…

    Grazie! ciao, Marcello

    Reply
  • Marcello Oliva

    Ciao a tutti, ho un’altro problema.
    In questo caso è un problema di visualizzazione su IPhone.
    Il menu a tendina non è visualizzato. All’inizio pensavo fosse legato al telefono che non interpreta correttamente lo script, ma poi ho visto che menu simili sono visualizzati correttamente…
    Avete qualche suggerimento su come modificare il css dedicato all’IPhone?
    grazie1000
    Marcello

    Reply
  • Enrico

    Come posso evitare che si sovrapponga ad altri elementi della pagina?

    Reply
  • Alessio

    Ciao, sto allestendo un sito (quello che ho indicato), attualmente è in fase di preparazione. Il mio problema è questo: quando passo il mouse sul link del menu verticale, nel codice che link del sito devo inserire?

    Reply
  • Federico

    Ciao! Ho tentato di mettere il tuo menu, personalizzandolo, in http://www.bostro.net ma non funziona con Internet Explorer! Se copio papale papale il codice in un file a parte, funziona, ma se lo integro nel codice del mio sito internet explorer (8) non apre le tendine. C’è qualche conflitto con qualche altro componente css che puoi suggerirmi? Il mio sito ha un css in cui NON ci sono tag div, e il menu è integrato in una tabella…

    Reply
  • Mariano Campajola

    ma come si inserisce il css in un documento html?
    scusate se ,forse, ho formulato male la domanda.

    Reply
  • kirti maurya

    I want to make a horizontal drop down menubar and just below it in extreme left a vertical drop down menu bar. I applied css coding for it. It works seperately but when i use coding for both type of drop down menu the sub menu of upper horizontal menu bar goes beneath the vertical menu bar. how it can be resolved.

    Reply
  • Mariano Campajola

    grazie delle tante risposte e comunque ho risolto.

    Reply
  • roberto

    ciao e complimenti!!!
    e’ un ottimo menu semplice per i neofiti
    solo una domanda:
    vorrei far cambiare il colore del testo quando il mouse e’ sopra al bottone
    come posso fare?

    grazie
    Roberto

    Reply

Leave a Comment

© 2012 Powered By Flepstudio.org

Scroll to top