Hover-Over von Twitter Bootstrap-Taste funktioniert nicht richtig

Question

Ich versuche, ein Popup-Dropdown-Menü für meine Schaltfläche wie im folgenden Snippet mit jQuery, aber ohne Glück zu bekommen.

Ich folge einer ähnlichen Logik wie meine bootstrap navbar (was gut funktioniert), aber wie im folgenden Beispiel, wenn ich den Mauszeiger über die Schaltfläche bewege, kann ich die Menüpunkte sehen, aber sobald ich die Maus bewege Aus der Taste verschwindet das Menü - was mache ich falsch ??

PS Wenn ich den Cursor schnell bewege, kann ich das Popup-Menü einfach "fangen".

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
     
 
       
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<script> 
 
    $(function(){ 
 
     $('.dropdown').hover(function() { 
 
        $(this).addClass('open'); 
 
       }, 
 
       function() { 
 
        $(this).removeClass('open'); 
 
       }); 
 
    }); 
 
</script>

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div class="container"> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      Select event: 
 
      <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="event/1">Event #1</a></li> 
 
      <li><a href="event/2">Event #2</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

Für Ihre Drop-Down-Menü gelten die Spitzenposition 98% statt 100%. Damit es nicht aus dem Fokus von DropDiv geht.

.dropdown-menu { top: 98% } 

Answer 2

Fügen Sie einfach ein wenig css

.dropdown-menu { margin:0; }

Die Marge Raum machte es schwer, über den Artikel zu springen