CSS のみを使用してドロップダウン メニューを作成するにはどうすればよいですか?

純粋な CSS ベースのドロップダウン メニューの作成

Web 開発では、ドロップダウン メニューは選択肢を論理的に整理して表示するために使用される一般的な UI 要素です。外部フレームワークや JavaScript に依存せずにドロップダウン メニューが必要な場合は、純粋な CSS が適切なソリューションを提供します。

純粋な CSS ドロップダウン メニューの実装

純粋な CSS を構築するには-ベースのドロップダウン メニューでは、次の手順に従います:

1. HTML構造: 各リスト項目 (
2. ) がメニュー項目を表す、順序なしリスト (
   ) を定義します。リスト項目内で、サブメニュー用に他の順序なしリストをネストします。
3. スタイル: CSS を使用してメニューのスタイルを設定します。 UL を箇条書きなし、余白なし、水平方向の配置に設定します。水平方向の配置のために li 要素をインラインブロックに配置します。
4. ドロップダウンの表示/非表示: サブメニューの表示/非表示を切り替えるには、リスト項目で :hover 疑似クラスを使用します。リスト項目にマウスを置くと、そのサブメニュー (ul) が表示されます。
5. メニューの外観: 背景色、背景色などの CSS プロパティを使用して、メニュー項目、サブメニュー、リンクの外観をカスタマイズします。カラーとパディング。

例コード

次のコード スニペットは、純粋な CSS ベースのドロップダウン メニューの例を示しています。

HTML:

CSS:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

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;
}

ライブデモ: [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

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