Question

我有一个简单的菜单

<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#menu li:hover {font-weight:bold;}

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

我尝试ul#menu li.leaf:hover {..}, ul#menu li.expanded:hover {..}，但即使在这种情况下，当我将鼠标悬停在li.expanded之上时，它的子项也会继承该样式。

对我来说，设置列表项的样式非常重要，而不是a（样式比我发布的样式更复杂）

我该如何解决这个问题？

Answer 1

我不确定为什么会发生这种情况，但我假设您正在尝试整理基于CSS的下拉菜单？

我建议您查看http://htmldog.com/articles/suckerfish/dropdowns/。这是一个很好的帮助，我总是将下拉菜单基于它。

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

Answer 2

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

第一条规则阻止在父li悬停时使所有第二级li变为粗体。第二个规则然后只设置当前悬停的第一级li并且当前将第二级li设置为粗体。

父级和兄弟级继承子列表项的样式

2 个答案: