Bootstrap3のドロップダウンをマウスオーバーで開く方法

Pocket

Webサイトのコーディングでレイアウトを作るのにすごく便利なBootstrap。実際の案件でも使用可能ならほぼ必ずといっていいほど使っています。

ただ、Bootstrapを使っていてコンポーネントの動きやレイアウトをちょっとだけカスタマイズしたい、ということはよくある話。ここで紹介するマウスオーバーもそんなちょっとした要望の1つです。

この記事ではBootstrapのドロップダウンをマウスオーバーで使うためのCSSカスタマイズ方法を紹介します。

ドロップダウンを多階層化する方法はこちら -> Bootstrap3のドロップダウンを多階層にする方法

Bootstrap3のドロップダウンをマウスオーバーで開く方法

通常はクリックで開くようになっていますが、CSSを1行加えるだけで簡単にマウスオーバーで開くようにすることが可能です。方法は以下の通り。

HTML

<div class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#">menu</a></li>
    <li><a href="#">menu</a></li>
    <li><a href="#">menu</a></li>
  </ul>
</div>

CSS

.dropdown:hover > .dropdown-menu{
  display: block;
}

実行結果は以下の通り。マウスオーバーで開くようになりました。
bootstrap-dropdown3