Horizontal Navigation list with CSS rollovers

Ok we want to create a horizontal Naviagtion bar, by creating a list containing images for buttons instead of text. Pretty simple stuff.

Here’s the HTML code:

Here’s the CSS code (X = your numerical value):
#myList {
list-style-type: none;
padding: 0;
margin: 0;
}
#myList li{
display: inline;
}
#myList span{
display: none;
}
.item1 a {
display: block;
background-repeat: no-repeat;
background-image: url(../images/sprite.jpg);
background-position: -Xpx -Xpx;
width: Xpx;
height: Xpx;
float:left;
}
.item1 a:hover {
width: Xpx;
height: Xpx;
background-position: -Xpx -Xpx;
}