html - 在悬停其子菜单项时保持悬停状态背景颜色

Question

我正在创建一个包含列表项的导航菜单 a、b、c、d、e, f.

当用户将鼠标悬停在列表 d 上时，子菜单项将在 d 中显示为 d1、d2， d3、d4 和d5。

d 菜单在悬停时有背景色，但当用户悬停在其子菜单项上时，d 的背景色消失。

我想要的是，当用户将鼠标悬停在子项上时，悬停颜色应保持在 d 并且仅在用户将鼠标移出其子菜单项后才会消失。

这是我的代码。

JSFiddle: http://jsfiddle.net/mm9QN/

HTML:

             <ul class="nav navbar-nav">
                <li class="active"><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">d</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">d1</a></li>
                    <li><a href="#">d2</a></li>
                    <li><a href="#">d3</a></li>
                    <li><a href="#">d4</a></li>
                    <li><a href="#">d5</a></li>
                  </ul>
                </li>
                <li><a href="#">e</a></li>
                <li><a href="#">f</a></li>
              </ul>

CSS:我正在使用 twitter bootstrap，所以无法粘贴完整的 css 代码，所以下面是相同的链接。

http://getbootstrap.com/dist/css/bootstrap.css

我想要悬停菜单而不是点击，所以这里是相同的代码

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

等待解决方案。

Answer 1

由于下拉菜单不在链接内，因此悬停链接时应用的样式在悬停下拉菜单时不适用。

如果您将悬停样式应用到列表项，当您悬停下拉菜单时它仍然会应用，因为它在列表项内:

.nav > li:hover { background: #eee; }

演示:http://jsfiddle.net/mm9QN/1/