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

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/