Bootstrap Drop-Down-Status Status bei Hover beibehalten

Question

Ich habe ein Bootstrap-Menü, das bei Hover on-line zur Verfügung stellt (verwendet den eingefügten Rahmen) und ersetzt den Pfeil nach unten mit dem Pfeil nach oben. Wenn ich jedoch den Mauszeiger über das Dropdown-Menü bewege, verschwindet dies. Ich möchte diesen Zustand beibehalten, während ich über dem Dropdown-Menü schwebe. Ich würde gerne CSS anstelle von JS verwenden, wenn möglich. Irgendwelche Ideen.

Hinweis: Es ist mir gelungen, die Hintergrundfarbe beizubehalten, während ich den Mauszeiger über das Dropdown-Menü halte.

Hier ist ein Screenshot. Hier

Menu

ist die 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> 

Hier ist die CSS ist:

.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

Wenn Sie im Dropdown-Menü klicken, wird der Bootstrap fügen Sie eine Klasse "offen" in das li, also können wir das benutzen.

Statt:

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

Verwendung:

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