Menu horizontal em lista com Imagens

Mostrei como fazer um bonito menu horizontal em lista usando imagens.
Dimensões:

Precisaremos da imagem abaixo:

HTML

<div id=”navigation”>
<ul id=”nav”>
<li id=”home”><a class=”current” href=”#”>Inicio</a></li>
<li id=”tutorials”><a href=”#tutorials” >Tutoriales</a></li>
<li id=”resources”><a href=”#resources”>Recursos</a></li>
<li id=”contact”><a href=”#contact”>Contacto</a></li>
</ul>
</div>

CSS

#navigation {
background: #FFF url(pix/bgMenu.gif) left repeat-x;
width: 450px; /* Ancho del contenedor de nuestro menú*/
height: 35px; /*Altura del contenedor de nuestro menú*/
margin:auto;
}

#navigation ul {
display: block;
list-style: none;
background: #FFF url(“pix/my_nav.png”) top left no-repeat;
margin: 0;
padding: 0;
width: 280px; /*Ancho de nuestro menú (la imagen)*/
height: 35px; /*Altura de la imagen*/
}

#navigation ul li {
float: left;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 70px; /*Ancho de cada item u opción de nuestro menú*/
height: 35px; /*Altura de cada item*/
}

#navigation ul li a {
display: block;
text-decoration: none;
text-indent: -999em;
width: 70px; /* Ancho de cada link de nuestro menú*/
height: 35px; /* Alto de cada link*/
}

#navigation ul li a:hover,
#navigation ul li a.current {
background-image: url(“pix/my_nav.png”); /* Estado activo*/
background-repeat: no-repeat;
}

#navigation ul li#home a:hover { background-position: 0px -35px; }
#navigation ul li#home a.current,
#navigation ul li#home a.current:hover { background-position: 0px -70px; }

#navigation ul li#tutorials a:hover { background-position: -70px -35px; }
#navigation ul li#tutorials a.current,
#navigation ul li#tutorials a.current:hover { background-position: -70px -70px; }

#navigation ul li#resources a:hover { background-position: -140px -35px; }
#navigation ul li#resources a.current,
#navigation ul li#resources a.current:hover { background-position: -140px -70px; }

#navigation ul li#contact a:hover { background-position: -210px -35px; }
#navigation ul li#contact a.current,
#navigation ul li#contact a.current:hover { background-position: -210px -70px; }

#navigation ul li a.current:hover { cursor: default; }

Exemplo

Fonte: http://www.infectedfx.net/