Bootstrap: Untermenü-Anzeige bei Hover

Question

Ich möchte Untermenü auf Hover in Bootstrap 3.0 anzeigen.

Nach dieser einfachen Codezeile funktioniert für mich.

Das Menü wird angezeigt, wenn ich den Mauszeiger über das übergeordnete Element halte, aber bevor ich meine Maus nach unten zu dem Element verschiebe, verschwindet es.

Ich muss auf Top-Nav klicken, damit es nicht verschwindet.

Bitte schlagen Sie mir eine Lösung vor, wie ich es beheben kann.

Answer 1

Sie können mit folgenden jQuery Skript für dieses

$('ul.nav li.dropdown').hover(function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
}, function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
}); 

Prüfung aktualisiert Schnipsel unten in voller Seite

$('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
}, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
});

/* bootstrap dropdown hover menu*/ 
 

 
body { 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    color: #4f5d6e; 
 
    position: relative; 
 
    background: rgb(26, 49, 95); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1))); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0); 
 
} 
 

 
.body-wrap { 
 
    min-height: 700px; 
 
} 
 

 
.body-wrap { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
.body-wrap:before, 
 
.body-wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    height: 260px; 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0))); 
 
    background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0); 
 
} 
 

 
.body-wrap:after { 
 
    top: auto; 
 
    bottom: 0; 
 
    background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0); 
 
} 
 

 
nav { 
 
    margin-top: 60px; 
 
    box-shadow: 5px 4px 5px #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> 
 

 
<div class="body-wrap"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-inverse" role="navigation"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Brand</a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 

 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">Separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
    </nav> 
 
    </div> 
 
</div>