Z-Graphics

/* Menu Body */
ul#menu {
width:100%;
height:122px;
background:url(http://img10.imageshack.us/img10/3126/68018218.png) repeat-x; /* url del bg */
list-style:none;
margin:0;
padding:0;
padding-top:20px;
}
/* Menu Body */
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}

/* Link - common attributes */
ul#menu li a {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll top left; /* url del sprite */
display:block;
height:81px;
position:relative;
}

/* Specify width and background position attributes specifically for the class: "inicio" */
ul#menu li a.inicio {
width:159px;
}

/* Specify width and background position attributes specifically for the class: "mantenimiento" */
ul#menu li a.mantenimiento {
width:157px;
background-position:-159px 0px;
}
/* Specify width and background position attributes specifically for the class: "redes" */
ul#menu li a.redes {
width:157px;
background-position:-316px 0px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portafolio {
width:157px;
background-position:-477px 0px;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll bottom left;/* url del sprite */
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}

/* Shift background position on hover for the class: "inicio" */
ul#menu li a.inicio span {
background-position:0px -81px;
}

/* Shift background position on hover for the class: "mantenimiento" */
ul#menu li a.mantenimiento span {
background-position:-159px -81px;
}
/* Shift background position on hover for the class: "redes" */
ul#menu li a.redes span {
background-position:-316px -81px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portafolio span {
background-position:-477px -81px;
}

<!-- Include jQuery Library -->
<script src="jquery.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>

<ul id="menu">
<li><a href="#" class="inicio"><span></span></a></li>
<li><a href="#" class="mantenimiento"><span></span></a></li>
<li><a href="#" class="redes"><span></span></a></li>
<li><a href="#" class="portafolio"><span></span></a></li>
</ul>

Para hacer tu propio sprite sin complicaciones te recomiendo visitar la pagina css sprite generator.