ブートストラップ3はドロップダウンメニューを使用できません

Question

私はブートストラップ3を使用しており、メニューがあります。しかし、私はドロップダウンメニューに問題があります。

非常に速く消えるため、ドロップダウンメニューを使用できません。また、それは非常に高速なアニメーション

私のhtmlなしでホバーに示し

<ul class="nav navbar-nav"> 
    <li class="menu-item dropdown"><a title="Sample Page" href="#">Sample Page <span class="caret"></span></a> 
     <ul role="menu" class="dropdown-menu"> 
      <li class="menu-item"><a title="Front Page" href="#">Front Page</a></li> 
      <li class="menu-item"><a title="Front Page" href="#">Front Page</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

.nav>li { 
    float: left; 
} 

.nav>li>a { 
    position: relative; 
    font-size: 17px; 
} 

.nav li a { 
    display: block; 
} 

.nav li.dropdown ul { 
    margin-top: 20px; 
    position: absolute; 
    top: 100%; 
    display: none; 
    z-index: 2000; 
    padding: 5px 0; 
    border-left: none; 
    border-right: none; 
    border-bottom: none; 
} 

どのようにこの問題を解決するには？

Answer 1

は、あなたが働いてサンプル/バイオリンを作ることができます<a>

.nav>li { 
 
    float: left; 
 
} 
 

 
.nav>li>a { 
 
    position: relative; 
 
    font-size: 17px; 
 
} 
 

 
.nav li a { 
 
    display: block; 
 
} 
 

 
.nav li.dropdown ul { 
 
    margin-top: 20px; 
 
    position: absolute; 
 
    top: 100%; 
 
    //display: none; 
 
    z-index: 2000; 
 
    padding: 5px 0; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-bottom: none; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<ul class="nav navbar-nav"> 
 
    <li class="menu-item dropdown "> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" title="Sample Page" href="#">Sample Page <span class="caret"></span></a> 
 
     <ul role="menu" class="dropdown-menu"> 
 
      <li class="menu-item"><a title="Front Page" href="#">Front Page</a></li> 
 
      <li class="menu-item"><a title="Front Page" href="#">Front Page</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>