Css 父项和同级继承子列表项样式

我有一份简单的菜单

<ul id="menu">
<li class="leaf"><a href="#">Menu Item 1</a></li>
<li class="leaf"><a href="#">Menu Item 2</a></li>
<li class="expanded"><a href="#">Menu Item 3</a>
    <ul>
       <li class="leaf"><a href="#">Menu Item a</a></li>
       <li class="leaf"><a href="#">Menu Item b</a></li>
       <li class="leaf"><a href="#">Menu Item c</a></li>
   </ul>
</li>
<li class="leaf"><a href="#">Menu Item 4</a></li>
</ul>

我面临的问题是，当我将鼠标悬停在ul li上时，父对象及其所有兄弟对象都会获得悬停效果。我只想让我在上面悬停的列表项获得效果

我尝试了ulmenu li.leaf:hover{..}，ulmenu li.expanded:hover{..}，但即使在这种情况下，当我将鼠标悬停在li.expanded上时，它的子对象也会继承样式

对我来说，设置列表项的样式是很重要的，而不是一个样式，因为样式比我发布的样式更复杂

---

如何修复此问题？

我不太清楚为什么会发生这种情况，但我假设您正在尝试组合一个基于CSS的下拉菜单

我建议你退房。这是一个很大的帮助，我总是根据它的下拉菜单

听起来你的问题是一些奇怪的继承错误-它在所有浏览器中都会发生吗

#menu li:hover li { font-weight:normal }
#menu li:hover, #menu li li:hover {font-weight:bold;}

---

第一条规则防止在父级li悬停时将所有第二级li设置为粗体。然后，第二条规则仅将当前悬停的第一级li和当前悬停的第二级li设置为粗体。

否，它不是下拉菜单。当您将鼠标悬停在列表项上方时，会出现一个图标。当您将鼠标悬停在链接上方时，该图标具有较宽的填充空间和不同的效果。到目前为止，我一直在FF 3.6.3中进行测试，感谢您抽出时间回复。这确实解决了我的同级问题，但当我将鼠标悬停在子项上时，父项列表项仍然继承样式。

#menu li:hover li { font-weight:normal }
#menu li:hover, #menu li li:hover {font-weight:bold;}