Question

如果标题不好看，我很抱歉，我不知道如何为我的问题写标题。

所以我有一个菜单栏，其中包含一些菜单项和子菜单项：

<div id="mainmenu">
<ul id="menu">
    <li><a class="current" href="">Menu1</a></li>
    <li><a href="#">Menu2</a>
        <ul>
            <li><a href="">Submenu1</a></li>
            <li><a href="">Submenu2</a></li>
        </ul>
    </li>
    <li><a href="">Menu3</a></li>
    <li><a href="">Menu4</a></li>
</ul>
</div>

这是我迄今为止所做的the fiddle。

我想要的是将菜单项保持在:hover状态，如果其子菜单项正在悬停，例如如果我的鼠标是在submenu或submenu2，Menu2也应该变暗。我怎么能用CSS做到这一点？

我希望我对自己的问题很清楚。

编辑：

Wooo非常感谢每一个人。

得到它：#menu li:hover

#menu li:hover,#menu a:hover,#menu > li a.current{

}

Answer 1

在CSS的最后一行，将#menu li:hover添加到目标选择器

此处更新了示例：http://jsfiddle.net/7UaNn/

Answer 2

您可以通过连接到父:hover元素的li状态而不是锚元素来实现此目的 - 这是实际上悬停的列表项的子项 - 如下所示：

li a:hover,
li:hover > a {
    color: #fff;
}

您可能需要使用:nth-child()来解决处于悬停状态的每个子链接。没试过这个。

/ edit：更新选择器，现在使用＆gt; a只选择悬停列表元素的直接子锚元素，不需要：nth-child等。

Answer 3

目前，所有针对列表项目的所有内容都应用于a - 元素。

但是，您需要将它们应用于li - 元素以保持悬停状态。

有时候这可能会变得棘手，但在你的情况下，它很简单，只需添加：

#menu > li:hover{
 background:#474747;   
}

你的风格。

参见 your modified fiddle

Answer 4

在以下css中添加此#menu li:hover > a

#menu a:hover, #menu > li a.current {
  // your Style
}

所以看起来应该是这样的：

 #menu a:hover, #menu > li a.current, #menu li:hover > a {
  // your Style
}

请参阅演示：http://jsfiddle.net/akhurshid/bk2HA/7/

Answer 5

与“a”一起还为“li”添加悬停：

#menu > li:hover{
background:#474747;   
}

Answer 6

在悬停LI的背景而不是'a'的背景时，使被改变的东西变为现实。

ul#menu li:hover { background:#000; }

CSS：如何在显示子菜单项时在菜单项上设置悬停效果

6 个答案: