引导程序下拉菜单保持悬停状态
我有一个在线悬停提供的引导菜单（利用插入边框），并用向上箭头替换向下箭头。 但是，当我将鼠标悬停在下拉菜单上时，此消失。 我想在悬停在下拉菜单上时保持此状态。 如果可能的话，我想用CSS代替JS。 有任何想法吗。
注意：我将鼠标悬停在下拉菜单上的同时设置了背景色。
这是一个截图。
菜单
这是HTML：
<nav class="navbar topmenu navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="header">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img class="avatar" src="assets/img/avatar.png" alt="" /> <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
这里是CSS：
.navbar {
min-height: 50px;
padding: 0 30px;
border: 0;
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0;
-moz-background-clip: padding;
border-radius: 0;
background-clip: padding-box;
}
.navbar.topmenu {
background: #454545;
border-color: #e5e5e5;
margin-bottom: 0;
font-size: 12px;
text-transform: uppercase;
}
.navbar.topmenu .navbar-nav > li {
background: inherit;
}
.navbar.topmenu .navbar-nav > li:hover > a {
color: #888;
}
.navbar.topmenu .navbar-nav > li:hover.dropdown > a {
background-color: #333;
zoom: 1;
filter: alpha(opacity=60);
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.navbar.topmenu .navbar-nav > li > a {
padding: 15px 7px;
color: #888;
}
.navbar.topmenu .navbar-nav > li > a:hover {
box-shadow: inset 0px 3px 0px 0px #e2e2e2;
color: #999;
}
.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before {
color: #999;
content: 'f106';
font-family: 'FontAwesome';
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu {
top: 51px;
right: -1px;
background: #212121;
zoom: 1;
filter: alpha(opacity=60);
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
padding: 0;
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0;
-moz-background-clip: padding;
border-radius: 0;
background-clip: padding-box;
/* Link. */
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu:hover > ul.dropdown-menu {
display: block;
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu > li > a {
font-size: 12px;
color: #ddd;
min-width: 215px;
border-bottom: 1px solid #444;
padding: 10px 15px;
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu > li > a:hover {
color: #eee;
background-color: inherit;
}
.navbar.topmenu ul.nav li.dropdown a > img.avatar {
-webkit-border-radius: 100%;
-webkit-background-clip: padding-box;
-moz-border-radius: 100%;
-moz-background-clip: padding;
border-radius: 100%;
background-clip: padding-box;
width: 25px;
margin-top: -4px;
margin-right: 6px;
}
.navbar.topmenu ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
当你点击下拉菜单时，引导程序会在li中添加一个“open”类，所以我们可以使用它。
代替：
.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before {
color: #999;
content: 'f106';
font-family: 'FontAwesome';
}
使用：
.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before,
.navbar.topmenu .navbar-nav > li.dropdown.open a i:before {
color: #999;
content: 'f106';
font-family: 'FontAwesome';
}