CSS Sprite : An easy way to do a generic unordered list?

Question

我正在尝试做 CSS Sprites，例如:http://www.alistapart.com/articles/sprites

我的菜单将通过 Wordpress 动态生成。我有 3 种基本状态:始终开启、悬停和事件。这将是所有按钮的相同状态。

我想使用基本的排序不足的列表，例如:

<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> 

我见过的每一种技术都在 LI 或 A 状态上使用 ID，是否可以使用上面的基本结构来做到这一点？

Answer 1

没关系，我想通了:

#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;
}