CSS: menu di navigazione con descrizione delle voci

Un menu di navigazione che presenta anche una descrizione sotto ciascuna voce non è semplice da gestire con i CSS. Il modo migliore di affrontare il problema è quello di usare misure in em in modo da creare un layout elastico che tenga conto delle variazioni nella dimensione del font di base. Vediamo come realizzare questo menu.

Partiamo da questa struttura HTML:

<ul id="navigation">
	<li>
		<a href="#">Home</a>
		<span class="desc">Lorem ipsum</span>
	</li>
	<li>
		<a href="#">About</a>
		<span class="desc">Lorem ipsum dolor sit amet</span>
	</li>
	<li>
		<a href="#">Contatti</a>
		<span class="desc">Et ideo autem aquis</span>
	</li>
</ul>

La descrizione va sotto ciascun link e le voci devono essere allineate orizzontalmente. Ecco il codice CSS:

#navigation {
	margin: 0;
	padding: 0 1em;
	list-style: none;
	background: #000;
	border-top: 0.4em solid #b30;
	overflow: hidden;
}

#navigation li {
	float: left;
	margin-right: 1em;
	width: 8em;
	display: block;
}

#navigation a {
	float: left;
	padding: 0;
	width: 100%;
	height: 2em;
	display: block;
	text-align: center;
	line-height: 2;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

#navigation a:hover {
	background: #b30;
}

#navigation li:hover {

	background: #666;

}


#navigation span.desc {
	display: block;
	clear: left;
	color: #ddd;
	padding-top: 0.3em;
	border-top: 1px dotted;
	font-family: Georgia, serif;
	font-style: italic;
	height: 100%;
	padding-bottom: 0.5em;
	text-align: center;
	height: 2em;
}

In realtà il floating applicato sui link non è di fatto necessario, ma siamo costretti ad usarlo per garantire una minima retrocompatibilità con alcune versioni di Internet Explorer (6 e 7 nello specifico).

Per adattare il menu alle vostre esigenze potete operare sulle dimensioni degli elementi. Notate come questi valori sono espressi in em. Potete visionare l'esempio finale in questa pagina.