Question

I’m trying to do CSS Sprites, such as: http://www.alistapart.com/articles/sprites

My menu is going to dynamically generated via WordPress. I have 3 basic states: always on, hover and active. This will be the same state for all buttons.

I want to use a basic underorded list such as:

<div class="navigation"> 
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul> 

Every technique I’ve seen uses ID’s on either the LI or A state’s, is there away to do this using the basic structure above?

Answer 1

Never mind I figured it out:

#topNav ul li{
    background:url("images/menu.jpg");
    width:141px;
    float:left;
    height:39px;
    /* padding: 10px 25px 10px 40px; */
    margin:1px;
    background-position:142px 0px;
    display: inline;
}

#topNav ul li:hover{
    background:url("images/menu.jpg");
    width:141px;
    background-position:284px 0px;
}

#topNav ul li .current{
    background:url("images/menu.jpg");
    width:200px;
    background-position:0px 0px;
}