CSS菜单多个悬停字符（u）rs

很抱歉这可能是一个很基本的问题，但我还没有在网上找到解决办法

我有一个简单的CSS菜单，下面是CSS：

#导航{
宽度：100%；
浮动：左；
保证金：0.03亿元；
填充：0；
列表样式：无；
不透明度：1；
边框底部：1px实心#ccc；
边框顶部：1px实心#ccc；
}
#李海军{
浮动：左；
}
#李娜{
显示：块；
填充：8px 15px；
文字装饰：无；
字体大小：粗体；
颜色：#069；
右边框：1px实心#ccc；
}
#导航李a：悬停{
颜色：#c00；
背景色：#fff；
}
/*结束导航栏样式*/

这是一个在线教程，所以不是我的代码

以下是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>

我只想在鼠标悬停时为每个菜单项设置不同的colo（u）R。
我假设您需要为每个项目创建一个单独的id（或类），但我不确定语法，无论我尝试什么，它都无法工作

---

非常感谢您的帮助。

您可以使用第n个孩子：

li:nth-child(2) a:hover{
  color: red;
}

---

此示例影响第二项。

您可以使用

：n子项

选择器，但在某些旧版IE中使用它

#导航李：第n个子（1）a:悬停{
颜色：绿色；
}
#李导航：第n个孩子（2）a:悬停{
颜色：蓝色；
}

---

等等。

在href链接中添加一个类，然后在css中调用悬停状态，然后相应地设置样式。下面是使用您的代码的示例：

HTML：

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

---

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

如果不使用

：nth-child（）

选择器，可以在

nav

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

---

你想改变文本颜色还是背景颜色？看看这个，这是背景颜色，谢谢。下面所有的答案都有效，所以我不打算写一个新的。但是查德的回答提出了一个观点，那就是孩子可能是一个痛苦的东西，以后需要修改。您的选项是每个项目或第n个子项的单独类。我会选择单独的类Hanks，只要IE8和更高版本可以，我同意，Luddites需要升级；）这就是你所说的“遗产”吗？

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

#nav li.about a:hover { background-color: red; }