yo en tu caso recortaria la imagen y aria una imagen por cada elemento del menu, que pondria en el background de cada elemento (imagen_desactivada1*), y una "version" de como quieres que se vea en el momento en el que pase el raton por encima (imagen_activada1*) y lo aria de la siguiente manera, que ademas es como esta en la página que tienes de referecia
Código HTML:
<ul id="menu">
<li><a href="" title="" class="enlace1">enalce 1</a><li>
<li><a href="" title="" class="enlace2">enalce 2</a><li>
<li><a href="" title="" class="enlace3">enalce 3</a><li>
<li><a href="" title="" class="enlace4">enalce 4</a><li>
<li><a href="" title="" class="enlace5">enalce 5</a><li>
<ul>
Código HTML:
#menu a{
display: block;
text-indent: -6000px;
}
.enlace1:link,
.enlace1:visited{
backgroun: #fff url(imagen_desactivada1*) no-repeat left top;
color: #000;
}
.enlace1:hover,
.enlace1.active{
backgroun: #fff url(imagen_activada1*) no-repeat left top;
color: #000;
}
(y continuando con cada enlace)
si no entiendes algo, o no te funciona quizas seria mejor que pusieras la imagen que estas utilizando