Bootstrapのハンバーガーメニューにドロップダウンを追加する

Bootstrapのハンバーガーメニューを、上手に整理していくためには、メニューの中に、さらにプルダウンメニューを入れましょう。
ポイントは、リストタグの中に、トグルメニューを書くだけです。
class="caret"を使うと、プルダウンの矢印が表示されます。

<nav class="navbar navbar-default">
  <div class="container-fluid"> 

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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" id="defaultNavbar1" >
      <ul class="nav navbar-nav">
        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> 作品リスト</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span> 注文・発送</a></li>

        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">プルダウン<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">リスト１</a></li>
                <li><a href="#">リスト２</a></li>
                <li><a href="#">リスト３</a></li>
            </ul>
        </li>      

        <li><a href="artist_logout.php"><span class="glyphicon glyphicon-off"></span> ログアウト</a></li>
      </ul>          
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>

サンプル