Programmando.net

<div id="header">
<ul id="menu">
<li id="one"><a href="#" title="one">one</a></li>
<li id="two"><a href="#" title="Mac style menu">Mac style menu</a></li>
<li id="three"><a href="#" title="Programmando.net" class="selected">Programmando.net</a></li>
<li id="four"><a href="#" title="four">four</a></li>
</ul>
</div>

/*
@author: Stefano Guglielmi
 
@site: www.programmando.net
 
*/
 
*{
 
margin:0; 	/* non modificare! */
 
padding:0; 	/* non modificare! */
 
}
 
body {
 
text-align:center;
 
}
 
#header {
 
width: 452px; 		/* =larghezza immagine */
 
height: 37px; 		/* =altezza immagine */
 
margin: 5px auto; 	/* cambiare il valore 5 per impostare i pixel del margine superiore e inferiore della barra */
 
}
 
#header ul#menu li {
 
display: inline;
 
overflow: hidden;
 
height:37px; 		/* =l' altezza dell' immagine */
 
}
 
#header {
 
background: url(nav.gif) no-repeat; /* =path immagine di default della barra */
 
}
 
#header ul#menu li a {
 
float: left;
 
height: 0px;
 
padding-top: 37px; 	/* =l' altezza dell' immagine */
 
overflow: hidden;
 
}
 
#menu li a:hover {
 
background: url(hover.gif) no-repeat;		/* =path immagine stato hover della barra */
 
}
 
#menu li a:active {
 
background: url(active.gif) no-repeat;		/* =path immagine stato active della barra */
 
}
 
#menu li a.selected {
 
background: url(selected.gif) no-repeat;	/* =path immagine stato selected della barra */
 
}
 
li#one a {
 
width:53px;		/* =larghezza del bottone1 */
 
}
 
li#two a {
 
width:164px;	/* =larghezza del bottone2 */
 
}
 
li#three a {
 
width:189px;	/* =larghezza del bottone3 */
 
}
 
li#four a {
 
width:46px;		/* =larghezza del bottone4 */
 
}
 
li#one a:hover,li#one a:active,li#one a.selected {
 
background-position:0px 0px;
 
}
 
li#two a:hover,li#two a:active,li#two a.selected {
 
background-position:-53px 0px;  		/* settare con la larghezza del bottone1 (53px) */
 
}
 
li#three a:hover,li#three a:active,li#three a.selected {
 
background-position:-217px 0px;			/* = bottone1+ bottone2 (53px+164px) */
 
}
 
li#four a:hover,li#four a:active,li#four a.selected {
 
background-position:-406px 0px;			/* = bottone1+bottone2+bottone3 (53px+164px+189px) */
 
}