Vi è mai capitato di "impazzire" durante la creazione di un menù a tendina perchè esso viene regolarmente "coperto" dagli altri elementi della pagina? A me sì, ed anche tante, tantissime volte!
In questo articolo vedremo quando si verifica questo problema, e soprattutto, vedremo come si risolve.
1. Il problema
Dunque, il problema si verifica quando alcuni elementi della pagina hanno posizionamento relativo mentre il menu a tendina ha il posizionamento assoluto. Ecco il codice di un tipico menu a tendina (la parte che importa a noi è il posizionamento assoluto, vedi linea 4):
/* Menu Dropdown */
#menu ul li ul {
display: none;
position: absolute;
top: 49px;
left: 0;
padding: 0;
margin: 0;
width: 200px;
border-bottom: 4px solid #f66a1d;
}
Ed ecco uno screenshot dell'errore: 
2. La soluzione
La soluzione al problema è la seguente: bisogna assegnare il posizionamento relativo ed il z-index all'elemento che si trova gerarchicamente ad un livello superiore di quello del menu a tendina. Attenzione: non bisogna assegnare il z-index direttamente al menu a tendina, bensì, lo ribadisco, all'elemento gerarchicamente superiore.
Vediamo di chiarire meglio il concetto con un esempio, supponiamo di avere questo html:
<!-- [Header] --> <div id="header"> <div id="header-wrapper"> <div id="menu"> <ul> <li class="active"><a href="index.htm">Home</a></li> <li class="drop"><a href="primi.htm">Primi</a> <ul> <li><a href="index.htm">Home</a></li> <li><a href="primi.htm">Primi</a></li> <li><a href="#">Secondi</a></li> <li><a href="#">Antipasti</a></li> <li><a href="#">Dessert</a></li> <li><a href="#">Bevande</a></li> <li><a href="#">Vegetariane</a></li> <li><a href="#">Economiche</a></li> </ul> </li> <li><a href="#">Secondi</a></li> <li><a href="#">Antipasti</a></li> <li><a href="#">Dessert</a></li> <li><a href="#">Bevande</a></li> <li><a href="#">Vegetariane</a></li> <li><a href="#">Economiche</a></li> </ul> </div> </div> </div> <!-- [/End Header] -->
Ora, andando per logica, inserendo il z-index all'elemento "#menu ul li ul" dovremmo risolvere, purtroppo però, come ho spiegato prima, la maggior parte delle volte questo sistema non funziona!
Il "segreto" sta nell'assegnare il posizionamento relativo ed il z-index al div #header, ovvero all'elemento genitore, perciò nel css andremo ad inserire una regola di questo tipo:
#header {
position: relative;
z-index: 10;
}
Finito! Semplice vero? Ecco il risultato:
aaaa
bobby