CSSフレームワークとして最も人気の高いBootstrap。すでに多くの方が使っていると思います。Bootstrapを使っていて、ちょっとだけレイアウトや動きを変えたいということはよくあるんですが、ここで紹介するドロップダウンもその1つ。 通常はリンク(dropdown-toggle)をクリックするとメニューが開くという仕組み。 ドロップダウンでよくある要望が、マウスオーバーで開きたい場合やメニューの多階層化です。Bootstrapのドロップダウンをマウスオーバーで開く方法でマウスオーバーの方法を解説しましたが、ここでは多階層化する方法をまとめてみます。 Bootstrapのドロップダウンを多階層化する デフォルトでは上記の画像のように1階層だけ表示されます。これを多階層化するには以下のようなコードを追加します。 HTML <div class="dropdown"> <a href="#
![Bootstrap3のドロップダウンを多階層にする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/63b1881a6569c84e129e66d5fc05bac927cd8b02/height=288;version=1;width=512/https%3A%2F%2Ftetra-themes.com%2Fwp-content%2Fuploads%2F2014%2F06%2FBootstrap.png)