手風琴內引導導航欄下拉

Question

請參考：APEC Energy

在右邊的角落裏，有一個用戶圖標。點擊它後，我們可以在下拉菜單中看到一個手風琴。這怎麼能實現？

我已經把基本代碼放在一起JSFiddle。我刪除了手風琴的所有試驗，因爲我試過的任何試驗只會破壞密碼。

我的導航欄代碼：

<!-- Navigation --> 
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a> 
      <a class="hidden-sm hidden-xs" href="#"> 
       <img class="gxcpl-logo" src="assets/images/logo.png" /> 
      </a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse navbar-menubuilder"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="active"><a href="/">Home</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Homes</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Introduction</a></li> 
         <li><a href="#">Innovation</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">Development</a></li> 
         <li><a href="#">Future</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Energy</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">BIO Heating</a></li> 
         <li><a href="#">BIO Lighting</a></li> 
         <li><a href="#">BIO Air</a></li> 
         <li><a href="#">BIO Frequency</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Water</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Whole House Filter</a></li> 
         <li><a href="#">Reverse Osmosis</a></li> 
         <li><a href="#">Portable Filters</a></li> 
         <li><a href="#">Portable Storage</a></li> 
         <li><a href="#">Rain Water Storage</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Garden</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Bio Grow System</a></li> 
         <li><a href="#">Bio Watering System</a></li> 
         <li><a href="#">Indoor Growing</a></li> 
         <li><a href="#">Organic Seeds</a></li> 
         <li><a href="#">Organic Plants</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Health</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Core Health</a></li> 
         <li><a href="#">Oils</a></li> 
         <li><a href="#">Raw Foods</a></li> 
         <li><a href="#">Natural Supplements</a></li> 
         <li><a href="#">Protien</a></li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> <i class="fa fa-user-o"></i></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Shopping Basket</a></li> 
         <li><a href="#">Contact Us</a></li> 
         <li><a href="#">Call Request</a></li> 
         <li><a href="#">Account Settings</a></li> 
         <li><a href="#">Login/Register</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<!-- Navigation --> 

Answer 1

你的jsfiddle似乎有手風琴菜單。我不明白，缺少什麼行爲？