<div id="nav">
<ul>
	<li><a href="#">Home</a> <span class="more">Vai alla homepage</span></li>
	<li><a href="#">Tutorials</a> <span class="more">Leggi le nostre guide</span></li>
	<li><a href="#">Ispirations</a> <span class="more">Prendi inspirazione</span></li>
	<li><a href="#">Photography</a> <span class="more">Guarda la nostra galleria fotografica</span></li>
	<li><a href="#">Web design</a> <span class="more">Sfoglia le ultime guide sul web design</span></li>
</ul>
</div>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

body{
background-color:#171717;
}

#nav{
//Utilizziamo lo sfondo precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente.
background:transparent url(bg_nav.jpg) repeat-x scroll 0 0;
//Impostiamo l\altezza del menu pari a 50px mentre la larghezza 100%
height:50px;
width:100%;
//Aggiungiamo un margine superiore (opzionale naturalmente)
margin-top:100px;
}

#nav ul{
padding-left:50px;
height:100%;
}

#nav li{
//Tramite questa stringa di codice possiamo modificare tonalità del gradiente rendendolo maggiormente scuro. I primi 3 valori (0, 0, 0) costituiscono il codice RGB del nostro colore (in questo caso nero), mentre l\ultimo l\opacità. Ciò ci permette di creare infinite combinazione di gradienti utilizzando solo una stringa di codice anzichè un\immagine!
background-color:rgba(0, 0, 0, 0.4);
//Rendiamo i vari elementi disposti orizzontalmente
display:inline-block;
//Aggiungiamo dei padding e dei margin per rendere il tutto più gradevole
padding-left:25px;
padding-right:25px;
margin-left:5px;
margin-top:2px;
//Impostiamo l\altezza pari a 90%
height:90%;
//Il line-height serve a posizionare il testo all\interno dell\elemento ad una certa altezza
line-height:40px;
//Impostiamo come cursore la manina
cursor:pointer;
//Utilizziamo le varie potenzialità di CSS3, prima creando i bordi arrotondati, poi, creando 1px di luce dal basso, facendo uso della tecnica del pixel popping
-moz-border-radius:10px;
-webkit-border-radius: 10px;
-moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
//Formattiamo il testo
font-family:Segoe UI;
color:#fff;
text-shadow:0px 1px 0px #000;
}

#nav a{
color:#fff;
text-decoration:none;
}

#nav li:hover{
//Come detto prima, grazie ad rgba, andremo a schiarire il gradiente al passaggio del mouse..
background-color:rgba(0, 0, 0, 0.3);
}
#nav li:active{
//Mentre a scurirlo al click
background-color:rgba(0, 0, 0, 0.5);
}

.more{
display:none;
font-size:8pt;
margin-left:10px;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:rgba(0, 0, 0, 0.2);
padding:5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

//Lasciamo caricare tutti gli oggetti della pagina
$(document).ready(function () {
//Al passaggio del mouse su una categoria
	$('#nav li').hover(function(){
//Si cercherà l'elemento con classe more all'interno di questa e verrà fatto comparire
		$(this).find(".more").stop(true).fadeIn("slow");
//Infine, grazie a questo piccolo trucchetto, dopo 750ms (1000 è un secondo) verrà fatto sparire
		$(this).find(".more").fadeTo(750,1).fadeOut(1000);
	});
});