Question

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

当用户将列表d悬停时，子菜单项会显示在d d1内，d2，d3，d4和分别为d5。

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

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

这是我的code。

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/

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

1 个答案: