html - Bootstrap 下拉菜单在悬停时保持状态

Question

我有一个 Bootstrap 菜单，悬​​停时它会提供在线(利用插入边框)并将向下箭头替换为向上箭头。但是，当我将鼠标悬停在下拉菜单上时，它就会消失。我想在将鼠标悬停在下拉菜单上时保持这种状态。如果可能的话，我想使用 CSS 而不是 JS。任何想法。

注意:我已设法在将鼠标悬停在下拉菜单上时保持背景颜色设置。

这是截图。

Menu

这是 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;
}

Answer 1

当您单击下拉菜单时， Bootstrap 会在 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';
}