使用Bootstrap创建下拉菜单

Question

如何使用Bootstrap创建下拉选项？

当前导航菜单的样子：

<div class="container"> 
    <div class="header"> 
    <ul class="nav nav-pills pull-right"> 
     <li class="active"><a href="index.php">Home</a></li> 
     <li><a href="chat.php">Chat</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="members.php">Members</a></li>> 
     <li><a href="about.php">About</a></li> 
     <li><a href="help.php">Help</a></li> 
    </ul> 
    <h3 class="text-muted">Site</h3> 
    </div> 

我已经试过类似：

<div class="container"> 
    <div class="header"> 
    <ul class="nav nav-pills pull-right"> 
     <li class="active"><a href="index.php">Home</a></li> 
     <li><a href="chat.php">Chat</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="members.php">Members</a></li> 
     **<div class="dropdown"> 
     <li><a href="dropdown.php">Drop down</a></li> 
     </div>** 
     <li><a href="about.php">About</a></li> 
     <li><a href="help.php">Help</a></li> 
    </ul> 
    <h3 class="text-muted">Site</h3> 
    </div> 

这不作为嵌入式工作下去。

Answer 1

<div class="dropdown"> 
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

参见：http://getbootstrap.com/components/#dropdowns

http://getbootstrap.com/components/#btn-dropdowns

http://getbootstrap.com/components/#navbar