引導程序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

添加class="dropdown-toggle" data-toggle="dropdown"到您的示例頁面<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>