Question

我使用Bootstrap构建导航栏。

当我将光标移动到下拉元素时，如何保持原始链接的悬停状态？

因此，如果我将鼠标悬停在下拉列表元素上，我仍然可以将灰色背景保留在Hover over me链接上吗？

当前演示： http://jsfiddle.net/DTcHh/3932/

这是我的代码：

<div class="container">

            <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">

                <div id="inner-header" class="wrap cf">

                    <nav role="navigation" class="primary col-md-12" itemscope itemtype="http://schema.org/SiteNavigationElement">
                        <ul id="menu-header-menu" class="nav primary top-nav cf navbar-nav">

                            <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-139 dropdown"><a title="" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true"><span>Hover over me</span> <span class="caret"></span></a>
                            <ul role="menu" class=" dropdown-menu">
                                <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a title="Sponsors" href="dropdown"><span>Dropdown</span></a></li>
                            </ul>
                            </li>

                        </ul>

                    </nav>

                </div>

            </header>

        </div>

CSS：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 nav {
    border:1px solid blue;
    float:left;
    text-align:center;
}
nav a {
    color:#000
}
body {
    margin: 10px;
}



@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}


.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}





ul.nav a:hover, a:hover { color: #5a5a5a!important; text-decoration:none}
.dropdown-menu {width:100%}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#fff!important}
.dropdown:hover .dropdown-menu {display: block;}

nav {
text-align:center
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Answer 1

为a代码指定了悬停样式，因此当您离开a以便留下标记时，不会使用悬停样式

你需要为li

提供悬停样式

添加此

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

演示 - http://jsfiddle.net/DTcHh/3933/

Answer 2

试试这个

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

演示：http://jsfiddle.net/DTcHh/3934/

保持＆＃39; hover＆＃39;下拉列表的父级状态

2 个答案: