/*
Dato che ci saranno elementi float (le liste), è necessario 
poterli contenere in un elemento "genitore" a sua volta reso float. 
In sostanza, basterà specificare le dimensioni e rendere float la lista. 
Se non è possibile assegnare una larghezza in pixel o in em ecc...,
 basta dichiarare, come nel nostro caso, una larghezza impostata sul valore auto. 
Verranno poi eliminati margini, il padding e il marcatore.*/
#navigation{ margin: 0; padding: 0; list-style-type: none; 
             background: transparent; float:left; width:174px; 
             } 
/*
Ora dobbiamo scrivere le dichiarazioni per gli elementi <li> della lista.
Annulliamo, come sempre, i margini ed il padding e dichiariamo ogni singola 
voce display: inline perchè il nostro sarà, appunto, un elenco orizzontale.
*/           
#navigation li{ padding: 0; margin: 0; 
                display: inline; vertical-align:middle;
                 background: #381EFF; } 

/*
Siamo giunti alla parte centrale dell'esempio, settando lo stato di collegamento 
delle voci linkate. Ache in questo caso, verranno rese float per in modo tale 
da "adattarsi" in larghezza. Da ricordare una nota teorica importante: 
un elemento float è reso automaticamente block-level (elemento di blocco). 
Verrà specificato un padding sinistro e destro di 0.6 em; superiore ed inferiore pari a 1.5 em. Verrà infine eliminata la sottolineatura ed assegnato il colore del bordo inferiore pari a 3 pixel:
*/      
#navigation li a{  float: left; color: #000; border-bottom: 3px solid #666; 
 background: #e6e6e6;  text-decoration: none; padding: .6em 1.5em;
    width: 81px;
    height: 12px;
}  
/*
 In ultimo veniamo alla scrittura del codice per le voci nello stato :hover 
 per le quali cambierà il colore del bordo inferiore, questa volta di colore nero:
*/
#navigation li a:hover{ border-bottom: 3px solid #000; background: #e6e6e6; } 

/*
Creare le classi per ogni voce nello stato :hover
*/
#navigation li.menuItem a:hover{background: #381EFF;}