純粋に CSS を使用して水平方向のドロップダウン メニューを作成する
水平方向のドロップダウン メニューでは、ユーザーがプライマリ ドロップダウン メニューの上にマウスを移動できるため、ナビゲーションが簡単になります。メニュー項目をクリックしてサブメニューを表示します。この効果を純粋に CSS だけで実現するには、ある程度のスタイリング能力が必要です。
HTML 構造:
まず、
CSS スタイル:
<ul>メニュー項目のスタイル:
<ul>ホバー効果:
<ul>レスポンシブ サブメニュー:
<ul>コード例:
<ul>
ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
ライブデモ:
[純粋な CSS 水平ドロップダウンメニュー](http://jsfiddle.net/XPE3w/7/)
以上がCSS のみを使用して水平ドロップダウン メニューを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。