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

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到目前为止我所做的一切。

我想要的是如果 submenu-item 处于悬停状态，则让 menu-item 也处于 :hover 状态，例如如果我的鼠标在 submenu 或 submenu2 上，Menu2 也应该变暗。我如何使用 CSS 做到这一点？

我希望我的问题很清楚。

编辑:

非常感谢大家。

得到它:#menu li:hover

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

} ​

Answer 1

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

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