を達成する洗練されたマルチレベルのCSSドロップダウンメニュー

Webデザインの領域で、訪問者をシームレスにガイドするユーザーインターフェイスを作成することが最重要です。マルチレベルのドロップダウンメニューは、ユーザーフレンドリーな方法で十分な情報を整理および提示するための非常に貴重なツールです。これらのメニューを構築するためのさまざまなCSS技術が存在しますが、最も効率的でエレガントなアプローチを見つけることは優先事項です。このソリューションは、シンプルさと有効性のバランスを取り、メニューがさまざまな画面サイズとレイアウトにシームレスに適応するようにします。

。トップレベルメニュー{ リストスタイルタイプ：なし; パディング：0; マージン：0; } .top-level-menu> li { ディスプレイ：インラインブロック。 位置：相対; } ul.dropdown { リストスタイルタイプ：なし; 位置：絶対; パディング：0; マージン：0; 表示：なし; } ul.dropdown> li { 表示：ブロック; 位置：相対; } .top-level-menu> li：Hover> ul.dropdown { 表示：ブロック; } .top-level-menu li：Hover Ul.dropdown> li：Hover Ul.DropDown { 表示：ブロック; }

.top-level-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.top-level-menu > li {
  display: inline-block;
  position: relative;
}

ul.dropdown {
  list-style-type: none;
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
}

ul.dropdown > li {
  display: block;
  position: relative;
}

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

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