Bootstrap Dropdown Maintain State on Hover

I have a bootstrap menu that on hover provides on over line (utilizes the inset border) and replaces the down arrow with the up arrow. However when I hover over the drop down menu this disappears. I would like to maintain this state while hovering over the drop down menu. I would like to use CSS instead of JS if possible. Any ideas.

Note: I have managed to keep the background color set while hovering over the drop down menu.

Here is a screenshot.

Menu

Here is the 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>

Here is the 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;
}

---

When you click in the dropdown menu, the bootstrap add a class "open" in the li, so we can use this.

Instead of:

.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before {
  color: #999;
  content: 'f106';
  font-family: 'FontAwesome';
}

Use:

.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';
}

链接地址: http://www.djcxy.com/p/75956.html

上一篇: 在bootstrap中分页

下一篇: 引导程序下拉菜单保持悬停状态