In una lezione di questa guida abbiamo visto come realizzare un menu verticale utilizzando le liste.

Tenendo come base lo stesso codice, realizzeremo in questa lezione un menu orizzontale utilizzando una lista non ordinata.

Il codice HTML

Il codice HTML che utilizzeremo è del tutto identico a quello utilizzato per l’altra lezione:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Il codice CSS

Anche il foglio di stile che utilizzeremo è molto simile a quello per la lista verticale, apporteremo solo alcune modifiche.

ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li {
    background-color: #FF831C;
    border-bottom: 5px solid #54BAE2;
    display: block;
    width: 150px;
    height: 30px;
    margin: 2px;
    float: left; /* elementi su singola riga */
}
ul#menu li a {
    color: #fff;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 150px;
    height: 30px;
    text-align: center;
}
ul#menu li.active, ul#menu li:hover {
    background-color: #54BAE2;
    border-bottom: 5px solid #FF831C;
}

Le modifiche che abbiamo apportato riguardano alcune proprietè dei list-item:

• float settato sul valore left;
• un margine destro e sinistro;
• bordo inferiore anziché sinistro.

La modifica più importante riguarda la proprietè float. Impostando su left il valore abbiamo affiancato gli elementi della lista anziché visualizzarne uno per riga.

Ecco l’esempio.