Twitterブートストラップボタンのホバーオーバーが正常に動作しない

Question

私のボタンのポップアップメニューは、jQueryを使用して、スニペットのように運がない場合と同様に取得しようとしています。

私は私のブートストラップnavbar（これはうまくいきます）にあるのと同様のロジックに従っていますが、以下の例のように、ボタンの上にマウスを置くとメニュー項目が表示されますが、マウスを動かすとすぐにメニューを消すボタンをオフに - 私は間違って何ですか？

PSカーソルをすばやく移動すると、ポップアップメニューを「キャッチ」できます。

<!-- 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

をジャンプして作られただけで

.dropdown-menu { margin:0; }

CSSのビットを追加適用します上の位置は100％ではなく98％です。ドロップダウン・ディビジョンの焦点を外れないように。

.dropdown-menu { top: 98% } 

Answer 2

余白スペースは、それが難しいあなたのドロップダウンメニューの項目に渡って