Menù orizzontale con sottomenù

Vediamo come creare un semplice menù con sottomenù

Esempio:

• Home
• Prodotti
  • Prodotto 1
  • Prodotto 2
• Chi siamo
• Contatti

Questo semplice menù è realizzato esclusivamente utilizzando codice CSS.
Con una semplice struttura HTML composta da <ul> e <li>, sarà possibile creare tutti i menù e sottomenù necessari al nostro sito.

Browser

Ho testato il funzionamento e la rappresentazione grafica del menù con tutte le ultime versioni dei browser più utilizzati:
 

Vediamo il codice 

CSS:

<style type="text/css">
.cssmenu {
 border:none;
 margin:0px;
 padding:0px;
 font-family:verdana, geneva, arial, helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
}
/*1° livello*/
.cssmenu ul {
 list-style:none;
 margin:0;
 padding:0;
}
.cssmenu li {
 float:left;
 padding:0px 8px 0px 8px;
}
.cssmenu li a {
 color:darkGoldenrod;
 display:block;
 font-weight:bold;
 line-height:43px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
}
.cssmenu li a:hover {
 color:green;
 text-decoration:none;
 text-decoration:underline;
}
/*2° livello*/
.cssmenu li ul {
 background:green;
 display:none;
 height:auto;
 position:absolute;
 width:225px;
 z-index:1;
}
.cssmenu li:hover ul {
 display:block;
}
.cssmenu li li {
 display:block;
 float:none;
 padding:0px;
 width:225px;
}
.cssmenu li ul a {
 display:block;
 font-size:12px;
 font-style:normal;
 padding:0px 10px 0px 15px;
 text-align:left;
 color:white;
}
.cssmenu li ul a:hover {
 background:darkgreen;
 color:greenyellow;
}
.cssmenu p {
 clear:left;
}
/*link active*/
.cssmenu .active > a {
 color:red;
}
.cssmenu .active > a:hover {
 text-decoration:underline;
 color:maroon;
}
</style>

HTML:

<div class='cssmenu'>
  <ul>
    <li class='active'><a href='#'><span>Home</span></a></li>
    <li><a href='#'><span>Prodotti</span></a>
      <ul>
        <li><a href='#'><span>Prodotto 1</span></a></li>
        <li><a href='#'><span>Prodotto 2</span></a></li>
      </ul>
    </li>
    <li><a href='#'><span>Chi siamo</span></a></li>
    <li><a href='#'><span>Contatti</span></a></li>
  </ul>
</div>

Spieghiamo:

Nel Css ho indicato dove apportare modifiche. Se vogliamo personalizzare il primo livello di menù, quello visibile senza intervento del mouse basterà modificare il codice CSS preceduto da:

/*1° livello*/

Per modificare graficamente il secondo livello basterà modificare il codice CSS preceduto da:

/*2° livello*/

È anche possibile modificare l'aspetto grafico del menù appartenente alla pagina che stiamo visualizzando, ossia la pagina attiva. Basterà modificare il codice CSS preceduto da:

/*link active*/

Nel codice HTML dovremo semplicemente specificare il link che appartiene alla pagina attuale modificando <li> in

<li class='active'>

ossia link attivo.

Per comodità è possibile scaricare l'intero file HTML + CSS.