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

純粋な CSS を使用したマルチレベル ドロップダウン メニューの作成

CSS のみのマルチレベル ドロップダウン メニューは、クリーンでアクセスしやすいものを提供しますWeb サイト上の複雑なナビゲーション構造を整理する方法。多数のアプローチが存在しますが、最適なソリューションは、求められる美しさと機能によって異なります。

効果的な手法の 1 つは、ネストされたリスト構造を利用し、サブメニューを絶対的に配置することです。

.third-level-menu
{
    -
    position: absolute;
    top: 0;
    right: 150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

これコードは、親メニュー項目の右側に配置される第 3 レベルのサブメニューを定義します。

.second-level-menu
{
    -
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

同様に、このコードは、親メニュー項目の下に配置される第 2 レベルのサブメニューを定義します。

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

このコードは、親メニュー項目を含むトップレベルのメニューを定義します。

親メニュー項目にカーソルを置いたときにサブメニューを表示するには:

.top-level-menu li:hover > ul
{
    -
    /* On hover, display the next level's menu */
    display: inline;
}

さらに、メニュー リンクにスタイルを適用できます。視覚的にカスタマイズするための項目をリストします。

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