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

純粋な CSS マルチレベル ドロップダウン メニュー: 総合ガイド

CSS を使用してマルチレベル ドロップダウン メニューを作成することは、整理するための強力なテクニックとなります。複雑なナビゲーション構造。古い方法がまだ存在する可能性がありますが、この記事では、純粋な CSS を使用してこの機能を実現する最新の効率的なアプローチを紹介します。

CSS でマルチレベル メニューを構築する鍵は、メニューの位置と表示プロパティを操作することにあります。アイテム。ドロップダウンの絶対位置を利用し、表示プロパティでドロップダウンの表示を制御することにより、動的でカスタマイズ可能なメニューを作成できます。

以下のコードは、3 レベルのドロップダウン メニュー構造を示しています。トップレベルのメニューには 4 つの主要カテゴリが含まれており、それぞれにドロップダウンが含まれています。 2 番目と 3 番目のレベルは、それぞれの親項目から垂直に拡張され、明確な階層ビューを提供します。

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

このメニューを HTML で実装するには、次のマークアップを使用します。

Byこれらの CSS と HTML スニペットを組み合わせると、エレガントなビジュアルを備えたユーザーフレンドリーなナビゲーション エクスペリエンスを提供する、完全に機能するマルチレベルのドロップダウン メニューを作成できます。

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