CSS: la barra di navigazione orizzontale annidata

Per creare questa barra di navigazione orizzontale:

Nella pagina web bisogna scrivere il seguente codice html:

<div id="menu">
        <!-- Lista generale -->
        <ul>
            <!-- 1° Elemento   -->
            <li><a href="#">Home</a></li>
            <!-- 2° Elemento -->
            <li><a href="#">Contattami</a></li>

            <!-- 3° Elemento: (Sottomenu) -->
            <li><a href="#">Sezioni</a>
                <ul>
                    <li><a href="#">Windows</a></li>
                    <li><a href="#">Sicurezza</a></li>
                    <li><a href="#">Attualità</a></li>
                </ul>
            </li>   
            <li><a href="#">Mi presento</a></li>
        </ul>
</div>

Nella pagina web per creare i menù della nostra barra di navigazione basta scrivere all'interno del nostro codice html i nomi dei menù e gli url delle pagine a cui si collegano.
I menù come potete vedere a livello di codice html sono dei semplici elenchi, di cui alcuni annidati.

Dobbiamo usare un file CSS per impostare lo stile della barra di navigazione.

Siccome le proprietà di un elemento definite all'interno file CSS incorporato in una pagina web hanno la priorità rispetto ad eventuali proprietà definite per lo stesso elemento da file CSS esterni (quindi collegati), in questo tutorial opto per incorporare il file CSS.

Quindi per incorporare il file CSS bisogna, all'interno della dell’head della nostra pagina html, digitare la seguente sintassi:

<style type="text/css">
#menu ul {
    padding: 0;
    margin: 0;
    z-index: 1000;
}

#menu li {
    position: relative;
    float: left;
    width: 140px;
    text-align: center;
    list-style: none;
}

#menu li a {
    background-color: #454545;
    color: #FFF;
    padding: 15px 20px;
    text-decoration: none;
    display: block;
}

#menu li a:hover {
    background-color: #0186ba;
    text-shadow: 0px 0px 1px #FFF;
}

#menu ul ul {
    position: absolute;
    top: 48px;
    visibility: hidden;
}

#menu ul li:hover ul {
    visibility: visible;
}

#menu ul ul:hover {
    box-shadow: 0px 20px 30px #7C7C7C;
}

#menu ul ul li a {
    background-color: #3A3A3A;
}

#menu ul ul li a:hover {
    background-color: #0186ba;
}
</style>

Se vogliamo cambiare l'aspetto della nostra barra di navigazione basta cambiare i colori all'interno della sintassi del nostro file CSS, oppure modificare la lunghezza dei pulsanti della barra di navigazione.