ホバー時にブートストラップ ドロップダウンをアクティブにして矢印を削除するにはどうすればよいですか?

ホバリング可能なブートストラップ メニュー ドロップダウン

この記事では、ブートストラップ メニュー ドロップダウンのトピックを拡張して、その動作と外観のカスタマイズについて詳しく説明します。具体的には、クリックしてメニューをアクティブ化し、付随する矢印を削除する代わりにホバーリングを有効にする方法について説明します。

ホバー時の自動ドロップダウン

自動メニュー ドロップダウンを実現するにはホバーする場合はCSSの修正が必要です。非表示のメニュー オプションをターゲットにし、対応するリスト項目にマウスを移動したときにそれらをブロックとして表示することで、目的の機能が実現されます。 Bootstrap ドキュメントの次の例を検討してください。

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

応答性に関する考慮事項

Bootstrap の応答性機能が採用されている場合、自動ドロップダウン機能は折りたたまれたナビゲーションには望ましくない可能性があります。小さい画面ではバーが表示されます。これに対処するには、CSS コードをメディア クエリ内にラップします。

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Arrow (Caret) Removal

ドロップダウン矢印の非表示は、のバージョンによって異なります。ブートストラップが利用されました。

ブートストラップ3

ブートストラップ 3 の場合は、.dropdown-toggle アンカー要素から HTML 要素 を削除します。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <!-- remove this line -->
</a></p>
<p><strong>ブートストラップ 2 およびそれ以下</strong></p>
<p>Bootstrap 2 以前では、CSS セレクターと以下のコード矢印を削除するために使用できます:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}