Uno degli elementi di un sito web che per i webmaster alle prime armi può essere di difficile realizzazione è il menù a tendina (cioè quei menù che appaiono e scompaiono al passaggio del mouse).
 
In questo post viene spiegato come ottenerne uno utilizzando solamente una lista html e definedo per essa le opportune regole CSS.

La prima cosa che facciamo è creare due div:
uno per il menu e l’altro per simulare il contenuto di una pagina qualsiasi, e per entrambi definiamo le regole CSS.
 
Ecco l’HTML che useremo nel nostro esempio:

<div id="menu-box"></div>
<div id="box"<p>Eventuale contenuto</p></div>

Ecco invece le regole css da cui partiremo

#menu_box {
	position:relative;
	width:200px;
	height:34px;
	background-color:#09F;
	margin-bottom:30px;
}

#box {
	width:170px;
	height:170px;
	background-color:#6FF; 
	padding:15px;
}

p {
	text-align:center;
}

Da notare il position:relative applicato al #menu_box.
Serve a far sì che la lista che gli andremo ad inserire dentro apparirà ad di sopra del #box.

A questo punto inseriamo la lista…

<div id="menu_box">
        <ul class="menu">
            <li class="intestazione_menu">VOCI LISTA</li>
            <li class="lista_tendina"><a href="#">VOCE A</a></li>
            <li class="lista_tendina"><a href="#">VOCE B</a></li>
            <li class="lista_tendina"><a href="#">VOCE C</a></li>
            <li class="lista_tendina"><a href="#">VOCE D</a></li>
            <li class="lista_tendina"><a href="#">VOCE E</a></li>
        </ul>
</div>

…e definiamo le sue regole CSS.

.menu {
    width:200px;
    height:34px;
    background-color:#FCC;
    list-style:none;
    padding:0;
    line-height:34px;
    text-align:center;
    overflow:hidden;
    cursor:pointer;		
}

Con background-color:#FCC; stabiliamo che tutta la lista <ul class=”menu”> avrà uno specifico colore.
Il valore ‘0’ del padding fa si che il tag <ul class=”menu”> coincida con il <div id=”menu-box”>.
Se provate infatti a togliere il padding vedrete che l’ul si sposta verso destra.
L’overflow:hidden; serve per fare in modo che tutte le voci successive alla prima (il tag li con classe intestazione_menu) non siano inizialmente visibili.
Il valore line-height, uguale al valore height di .menu e #menu_box, serve a far sì che la finestra della prima voce di lista abbia la stessa altezza dei due div indicati.

Ora facciamo in modo che la finestra della prima voce di lista abbia un colore diverso dalle altre.

.intestazione_menu {
    background-color:#F90;
}

Applicando la pseudoclasse :hover alla classe .menu facciamo in modo che al passaggio del mouse sopra di esso appaiano le altre voci di lista.
Definendo inoltre con ‘auto’ l’altezza della classe .menu facciamo in modo che questa sia alta esattamente quanto sono alte tutte le voci della nostra lista .
Se provate infatti ad ad height valore 100px e 250px, vedrete che nel primo caso appariranno solo due voci di lista e nel secondo caso la finestra del menu sarà più lunga del dovuto.

.menu:hover {
	height:auto;
}

Applicando la pseudoclasse :hover alle voci <li class=”lista_tendina”> facciamo in modo che al passaggio del mouse sulle relative finestre queste cambiano colore.

.lista_tendina:hover {
	background-color:#C36;
}

Completiamo tutto definendo li a, e li a:hover

li a {
	text-decoration:none;
	color:#000;
}
		
li a:hover {
	color:#FFF;
}

Da notare che con quanto è stato definito le finestre dei <li class=”lista_tendina”> appariranno della stessa altezza di <li class=”intestazione_menu”>.

Per fare in modo che quest’altezza sia maggiore o minore del valore 34px usato fin qui è sufficiente ridefinire la loro height e line-height.

.lista_tendina {
	height:50px;
	line-height:50px;
}

Il pregio principale di questo menu a tendina (in pratica è la versione più elementare) è che permette di capire, in maniera semplice, come bisogna ragionare per crearne di più complessi.
Oltre al fatto che possiamo ovviamente affiancarne più di uno appresso all’altro, realizzando così una fila di menù a tendina, ognuno dei quali può contenere “liste” che possono avere un numero voci e altezze definibili per il singolo menù.