css - 即使鼠标离开主下拉链接，如何保持悬停状态

Question

我有一个可用的纯 CSS 下拉菜单

html;

<ul id=nav>
<li><a href="">Main Link 1</a>
    <ul>
        <li><a href="">Main Link 1 Sub Link 1</a></li>
        <li><a href="">Main Link 1 Sub Link 2</a></li>
        <li><a href="">Main Link 1 Sub Link 3</a></li>
        <li><a href="">Main Link 1 Sub Link 4</a></li>
    </ul></li>
<li><a href="">Main Link 2</a></li>
<li><a href="">Main Link 3</a>
<ul>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
    </ul></li>
<li><a href="">Main Link 4</a></li>
</ul>

请查看下面的完整表格，因为我无法在此处发布所有 css 代码；

http://jsfiddle.net/hF3dm/

我的问题是当您悬停邮件链接并继续访问子链接时，主链接的悬停状态消失了。如何在悬停在子链接上时保持主链接的悬停状态？

Answer 1

最好的办法是将主链接的悬停状态放在“li”而不是“a”标签上。

ul#nav li:hover {
  // do something
}

Answer 2

我刚刚添加了：

#nav li:hover { background-color: #a32a31; color: #fff; }

到你的例子（在CSS的底部），似乎做你现在需要的

例如http://jsfiddle.net/hF3dm/6/