CSS sprites menu

Building a CSS menu with sprites requires only a basic knowledge of how the background-position works. Basically, when you specify a negative value on the y-axis with this property, the background image is moved from bottom to top, while its default behavior is from top to bottom. Done that, you can build whatever menu you want with CSS sprites. Given the following HTML structure:

<ul id="navigation">

 <li><a href="#" id="home">Home</a></li>
 <li><a href="#" id="about">About</a></li>
 <li><a href="#" id="contacts">Contacts</a></li>

</ul>

Each link has a different ID, so that it will have a different background-position value. Here's the CSS code:

body {
 margin: 0;
 padding: 0;
 color: #444;
 font: 100% Georgia, serif;
}

#navigation {
 height: 52px;
 margin: 0;
 padding: 0 1em;
 list-style: none;
 border-bottom: 4px solid;
}

#navigation li {
 float: left;
 height: 100%;
 margin-right: 0.5em;
}

#navigation a {
 float: left;
 display: block;
 height: 100%;
 color: #a60;
 text-transform: uppercase;
 padding: 0 1em 0 55px;
 line-height: 60px;
 background-image: url(sprites.png);
 background-repeat: no-repeat;
 text-decoration: none;
}

#navigation a:hover {
 color: #c60;
}

#navigation #home {
 background-position: 0 0;
}

#navigation #about {
 background-position: 0 -61px;
}
#navigation #contacts {
 background-position: 0 -126px;
}

As you can see, only the y-axis changes its value. You can see the demo below.

Demo

Live demo