Salve a tutti, sto cercando di realizzare un menu orizzontale grafico, ossia con al posto dei link in testo con delle immagini, il menù è composto da 6 voci, inizialmente pensavo di utilizzare 6 immagini .png per ogni voce di menu e altre 6 per il rollover, però mi è stato suggerito viste le troppe request http di utilizzare un'unica immagine per le voci a "riposo" e una per il rollover, ma non ho capito come funziona il tutto sinceramente, attualmente questa è la parte css:

.menu_container {
height:100px;
width:960px;
margin:0 auto;
background-image: url(immagini/menu.png);
background-position:center;
background-repeat:no-repeat;
}

.elementi_menu {
background-image:url(immagini/voci_menu.png);
background-repeat:no-repeat;
position:relative;
width:960px;
height:100px;
margin:0;
padding:0;
text-align:center;
}

.elementi_menu li {
position:absolute;
width:64px;
height:64px;
list-style:none;
}

.elementi_menu a {
text-decoration:none;
display:block;
width:100%;
height:100%;
}

.elementi_menu a span{
position:relative;
z-index:-1; /*nasconte testo menù dietro immagini*/
color:#FF0000;
}

.elementi_menu a:link
.elementi_menu a:visited {

}

.elementi_menu a:hover
.elementi_menu a:focus
.elementi_menu a:active {

}

.elementi_menu #home {
left:48px;
top:20px;
}
.elementi_menu #home a {
/*background-position:-48px -20px;*/
}
.elementi_menu #home a:hover,
.elementi_menu #home a:focus,
.elementi_menu #home a:active {

}


.elementi_menu #night {
left:210px;
top:20px;
}
.elementi_menu #day {
left:368px;
top:20px;
}
.elementi_menu #events {
left:527px;
top:20px;
}
.elementi_menu #gallery {
left:688px;
top:20px;
}
.elementi_menu #info {
left:848px;
top:20px;

e la parte html:

<div id="menu">
<div class="menu_container">
<ul class="elementi_menu">
<li id="home"><span>Home</span>
<li id="night"><span>Night</span>
<li id="day"><span>Day</span>
<li id="events"><span>Events</span>
<li id="gallery"><span>Gallery</span>
<li id="info"><span>Info</span>[/list]
</div>
</div>