Paul’s example misses showing you how to handle your top/bottom padding, and more important sliding the image sideways without resorting to a giant mess of CSS declaring background-position three times for EVERY menu item. (assuming we’re talking one image for the whole MENU, which is the efficient approach).
The trick i’d use for that is using overflow to chop it off, and to add the padding to the top of the image… for example if you had 8px padding top/bottom and a 48x48 image, I’d store them as a grid of 48x56 (stick with multiples of 8, computers work better with them, as does the png compression) for a single image of 8x3 tiles working out to a 384x168 file. I would also suggest DITCHING alpha transparency and pre-compositing the images to save bandwidth, cross browser headaches, and to skip throwing some idiotic script at legacy IE just to make the dumbest bloated version of PNG work.
So for markup (pretty much what Paul did except with more relevant classes)
<ul>
<li class="home current">
<a href="#">
<span></span>
Home
</a>
</li>
<li class="produtos">
<a href="#">
<span></span>
Protudos
</a>
</li>
<li class="iniciativas">
<a href="#">
<span></span>
Iniciativas
</a>
</li>
<!-- etc, etc --->
</ul>
with this for CSS:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
#menu {
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats IE */
list-style:none;
border-left:1px solid #CCC;
}
#menu li {
display:inline;
}
#menu a {
float:left;
width:110px;
overflow:hidden;
padding:56px 0 8px;
border-right:1px solid #CCC;
text-align:center;
}
#menu a span { /* need to say 'a' for specificity legacy IE */
position:absolute;
top:0;
left:50%;
margin-right:-24px;
height:56px;
width:48px;
background:url(imageSprites.png) 0 0 no-repeat;
}
#mainMenu .current a {
background:#F0F0F0;
}
#mainMenu .current a span {
top:-56px;
height:112px;
}
#menu a:active,
#menu a:focus,
#menu a:hover {
background-color:#8CF;
}
#menu a:active span,
#menu a:focus span,
#menu a:hover span {
top:-112px;
height:168px;
}
#mainMenu .home span {
background-position:0 0;
}
#mainMenu .produtos span {
background-position:-48px 0;
}
#mainMenu .iniciativas span {
background-position:-96px 0;
}
#mainMenu .formacoes span {
background-position:-144px 0;
}
#mainMenu .empregos span {
background-position:-192px 0;
}
#mainMenu .voluntardo span {
background-position:-240px 0;
}
#mainMenu .perfil span {
background-position:-288px 0;
}
#mainMenu .password span {
background-position:-336px 0;
}
The extra 16px in the image might seem like a waste, but you get that down to a 8 bit (256 color) or less PNG it pretty much disappears from the file. Instead of sliding the background around on both axis (painful) we slide it up out of the anchor and increase it’s height on hover – revealing the part of the image vertically you want to show. That means we only need to say background-position once for each image to slide it on the horizontal. Means getting APO involved, but that’s not a big deal here.
So one image for all EIGHT menu items with all three states (normal, current, active/focus/hover) without having to do the rather painful:
#mainMenu .home a span {
background-position:0 0;
}
#mainMenu .home.current a span {
background-position:0 -48px;
}
#mainMenu .home a:active span,
#mainMenu .home a:focus span,
#mainMenu .home a:hover span {
background-position:0 -96px;
}
For each and every menu item.