ブートストラップ・ドロップダウン・ホバー上の状態を維持する

Question

私は、ホバー上にライン（インセット・ボーダーを利用する）を提供し、下向き矢印を上向き矢印で置き換えるブートストラップ・メニューを持っています。しかし、私がドロップダウンメニューの上にマウスを置くと、これは消えます。私はドロップダウンメニューの上にホバリングしながらこの状態を維持したいと思います。 JSの代わりにCSSを使用したいと考えています。何か案は。

注：ドロップダウンメニューの上にカーソルを置いたまま、背景色を維持しています。

ここはスクリーンショットです。ここで

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

ドロップダウンメニューをクリックすると、ブートストラップで "オープン" クラスを追加私たちはこれを使うことができます。

の代わりに：

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