I menu sono da sempre parte integrante e fondamentale delle pagine web. Con il passare degli anni e grazie alle moderne tecniche CSS e Javascript si è assistito ad un radicale cambiamento di questo componente verso una forma sempre più dinamica e flessibile.

In questo post ti spiego una tecnica molto semplice per realizzare un menu dropdown a tre livelli (ma potrebbero essere a due o più) con il solo uso dei fogli di stile CSS.

menu-dropdown-css

I menu a tendina (dropdown menu) imitano in un certo senso il comportamento del tag select (quello che viene spesso usato per inserire la nazione in una form).

Passiamo al codice…

L’unica pecca di questa tecnica, a cui rimedieremo in un post successivo, è la mancata compatibilità con Internet Explorer 6 il quale non supporto la proprietà hover per elementi che non siano i link.

per prima cosa vediamo la struttura dell’html. Si tratta di una semplice lista non numerata con 2 sotto livelli in html:

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

Senza applicare stili la resa di questo codice è la seguente:

menu-no-css

Applichiamo ora il seguente CSS:

#menu{
padding:0;
maragin:0;
font-family:Verdana,Arial;
font-size:0.70em;
}

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

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}

#menu li a{
width:150px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
color: #333;
background: #EDEDED;
}

#menu li a:hover{
background: #CCC;
}

#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}

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

#menu ul ul ul li {
visibility: hidden;
left:150px;
top:-30px;
}

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

facendo sapiente uso della proprietà Visibility e dell’attributo hover è possibile rendere visibili le liste in conseguenza al passaggio del mouse sulla lista superiore.

Il risultato che ne consegue è il seguente:

menu-dropdown-css

Questa soluzione è stata testata ed perfettamente compatibile con Internet Explorer (esclusa versione 6),  Firefox, Safari e Chrome.

AGGIORNAMENTO

In risposta a Frulli aggiungo il CSS necessario per un ‘uteriore livello:

<pre>#menu ul ul ul  ul li{
display:none;
left:150px;
top:-30px;
}

#menu ul ul ul li:hover ul li {
display:block;
}

In pratica non fai altro aggiungere un UL ogni volta che utilizzi un sottolivello.
Allego per completezza l’esempio aggiornato da scaricare:

Webquadro Dropdown Menu V2 (680)

Se stai cercando nuove risorse sui fogli di stile visita il canale CSS di webquadro o puoi abbonarti gratuitamente al feed RSS di webquadro per non perdere nemmeno un articolo.

Se invece vuoi un menu dinamico che faccia uso di javascript prova a seguire questo tutorial: Semplice menu javascript con jQuery

Ecco una lista di altre risorse che potrebbero interessarti:

  1. Semplice menu javascript con jQuery
  2. Modificare il menu della Dashboard di Wordpress