Bootstrap3のドロップダウンをマウスオーバーで使用する方法

Tweet

Pocket

Bootstrap3.0のドロップダウンはデフォルトでマウスクリックすると開くようになっています。モバイルサイトのことを考えるとこのままが好ましいのですが、PCサイズではマウスオーバーで使いたいこともありますよね。

そんなときに役に立つマウスオーバーでドロップダウンメニューを開く方法を紹介します。

CSSコードを加える

以下のコードをstyle.cssなどに記述します。

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

ul.navのところは別のclassやidを指定している場合、それに合わせて変更します。

矢印を削除

次に矢印を削除しておきます。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

参考サイト：How to make twitter bootstrap menu dropdown on hover rather than click