Twitter Bootstrap でホバーでアクティブ化されるドロップダウンを作成するにはどうすればよいですか?

Twitter Bootstrap のホバー ドロップダウン

Twitter Bootstrap のメニュー システムを利用する場合、ホバー時にメニューが自動的にドロップダウンし、メニューのタイトルをクリックする必要があります。さらに、ユーザーはメニュー タイトルに隣接するナビゲーション矢印を非表示にすることを好む場合があります。

ホバー ドロップダウンの CSS

ホバー時の自動ドロップダウンを有効にするには、次の CSS を実装します。

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

レスポンシブ機能を使用するには、コードをメディアでラップしますクエリ:

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

ナビゲーション矢印を非表示にする CSS

ブートストラップ 3:

HTML を削除 .dropdown-toggle アンカーからelement.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a>

ブートストラップ 2 以下:

この CSS セレクターとコードを使用して矢印をターゲットにして削除します:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

理解これらの CSS 要素がどのように機能するかによって、特定のニーズに合わせて Bootstrap メニューをカスタマイズする能力が強化されます。

以上がTwitter Bootstrap でホバーでアクティブ化されるドロップダウンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。