0

我正在创建一个带有列表项的导航菜单a, b, c, d, e。f

当用户将鼠标悬停在列表中时，d子菜单项分别显示d为d1、d2、和。d3d4d5

菜单在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 引导程序，所以无法粘贴完整的 css 代码，所以下面是相同的链接。

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

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

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

等待解决方案。

4

1 回答 1

8

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

如果您将悬停样式应用于列表项，则当您悬停下拉菜单时它仍然会应用，因为它位于列表项内：

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

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

于 2013-09-28T11:34:31.247 回答