<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);
	});
});

<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>

body{
/* Opzionale */
background:transparent url(bg.jpg) repeat scroll 0 0;
 
/* Impostiamo il font che vogliamo utilizzare */
font-family: Tahoma, Sans-Serif;
}
.cat_container{
/* Questo ci servirà per gl'angoli arrotondati del box grigio */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Questa è l'ombra esterna posizionata verso la fine del menu. RGBA presenta i 3 valori di Rosso, Verde e Blu e il canale Alpha per la trasparenza */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
 
/* Impostiamo sfondo e la larghezza del menu */
background-color: #e9e9e9;
width: 250px;
 
/* Il padding ci servirà a far si che dopo le categorie ci sia un pò di spazio vuoto */
padding-bottom: 5px;
margin: 10px;
}
.cat_title{
/* Impostiamo, anche qui, gli angoli arrotondati */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Creiamo un'altra ombra */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
 
/* Utilizziamo il gradiente verde precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente */
background: transparent url(bg_cat_title.jpg) repeat-x scroll 0 0;
height: 50px;
 
/* Impostiamo il testo */
font-size: 16pt;
color: #fff;
 
/* Impostiamo l'ombra di 1px */
text-shadow: 0px 1px 0px #000;
 
/* Line-height ci serve per centrare verticalmente il testo */
line-height: 40px;
 
/* Mettiamo un pò di margine a sinistra in modo tale che la scritta sia ben posizionata */
padding-left: 10px;
 
/* Impostiamo come cursore la manina */
cursor: pointer;
}
.cat_list ul{
/* Eliminiamo il padding che di è default 50px */
padding: 0;
}
.cat_list li{
/* Utilizziamo come sfondo il divisore con effetto pixel popping, ripetuto orizzontalmente, e posizionato in basso */
background: transparent url(divisor.jpg) repeat-x scroll 0 bottom;
 
/* Eliminiamo i pallini a fianco ad ogni voce della lista */
list-style: none;
 
/* Aggiungiamo un padding per posizionare meglio orizzontalmente il testo */
padding-left: 20px;
 
/* Impostiamo un l'altezza di ogni categoria */
height: 25px;
 
/* Formattiamo il testo */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
}
.cat_list a{
/* Formattiamo nuovamente il testo, nel caso in cui le categorie presentano un link */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
text-decoration: none;
}
.cat_list li:hover{
/* Utilizziamo un altro colore di sfondo al passaggio del mouse su una categoria */
background-color: #e4e4e4;
}

// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<title>jQuery categories</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});
</script>
</head>
 
 
<body>
<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>
</body>
</html>