Per realizzare un menu di navigazione orizzontale utilizzando le liste occorre aggiungere al vostro foglio di stile un selettore che identifichi il menu (ad esempio #navmenu).
Per l’elemento ul (unordered list) presente nel menu bisogna aggiungere una regola CSS che rimuova il punto dalla lista e setti i margini a zero per l’intera lista.
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
Il passo successivo è quello di disporre orizzontalmente gli elementi delle lista (li-list item)
#navmenu li {display: inline; }
Ora non resta altro che passare al file HTLM:
<div id="navmenu">
<ul>
<li>home</li>
<li>programma</li>
<li>materiale didattico</li>
<li>esami</li>
</ul>
</div>
Ovviamente potete personalizzare ulteriormente il menu aggiungendo altre regole… ad esempio:
#navmenu li {
display: inline;
background-color: #CCCCCC;
padding: 3px;
}
Questo è il risultato:
