Come creare un menù orizzontale con il Css

L'uso del Css consente di realizzare effetti altrimenti impossibili con il linguaggio HTML. Uno di questi è senz'altro il menù orizzontale. Il browser riconosce i tag UL e LI per realizzare esclusivamente un menù verticale. Tramite il Css è possibile impartire una diversa disposizione delle voci di menù, ad esempio quella orizzontale. Vediamo come fare.

Partiamo da un semplice elenco puntato in linguaggio HTML

<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3</li>
</ul>

Il primo passo da compiere è settare il margine zero per eliminare la tabulazione sul tag UL.

ul
{
margin: 0px;
}

Il secondo passo da compiere è sul tag LI per settare la proprietà float a sinistra (Left) e la proprietà display su Inline. Nel seguente modo:

li
{
float: Left;
display: Inline;
}

E' anche possibile definire una larghezza massima di ciascuna voce del menù. Per farlo è sufficiente aggiungere tra le proprietà LI anche il parametro che imposta la sua larghezza. Ad esempio:

li
{
float: Left;
display: Inline;
width: 100px;
}

Il browser visualizzerà ogni menù in orizzontale anziché in verticale.

03 / 08 / 2008