ホバー時に開くブートストラップ ドロップダウン メニューを作成するにはどうすればよいですか?

ブートストラップ ドロップダウン ホバー メニュー

ブートストラップ ドロップダウン メニューを作成する場合、デフォルトの動作では、トグル ボタンをクリックするとメニューが開きます。 。ただし、代わりにホバー時に開いた方がよい場合もあります。

これを実現するには、CSS を使用できます。

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

この CSS コードは、ドロップダウン メニューと親ドロップダウン要素の上にマウスを置いたときに、その表示プロパティをブロックするように設定します。さらに、ドロップダウン メニューの上部からデフォルトのマージンが削除され、ドロップダウンが開いているときに表示されるギャップが解消されます。

この解決策は簡単で、HTML 構造や JavaScript を変更する必要はありません。コード。これにより、ホバー時に開くドロップダウン メニューを簡単に作成でき、ユーザー エクスペリエンスが向上し、より直感的なナビゲーションが可能になります。

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