CSS 菜单多个悬停颜色(u)rs

Question

很抱歉这可能是一个非常基本的问题，但我还没有在网上找到解决方案。

我有一个简单的 CSS 菜单，这是 CSS:

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    opacity:1;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav li {
    float: left; 
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    background-color: #fff;
}

/* End navigation bar styling. */

这是来自在线教程，所以不是我的代码。

这是 HTML:

<!-- language: lang-html -->

<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>

我想做的就是在悬停时为每个菜单项设置不同的颜色(u)。
我假设您需要为每个元素创建一个单独的 ID(或类)，但我不确定语法，无论我尝试什么，它都不会起作用。

非常感谢您的帮助。

Answer 1

向 href 链接添加一个类，然后在您的 css 中调用悬停状态，然后相应地设置样式。这是使用您的代码的示例:http://jsfiddle.net/LGL37/

HTML:

<a href="#" class="about">TEXT</a>

CSS

.about:hover { background: yellow; }

编辑:这是一个比其他答案更好的解决方案，因为它是跨浏览器兼容的，如果您将来需要更多样式，您将有单独的类作为目标，而不是第 n 个，这会让人感到困惑。