Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat Hanya Menggunakan CSS?

Mencipta Menu Drop-Down Berbilang Tahap dengan CSS Tulen

Mencapai menu lungsur berbilang peringkat menggunakan CSS tulen telah berkembang sejak penyelesaian awal yang telah anda nyatakan. Berikut ialah pendekatan moden yang menawarkan pelaksanaan yang rapi dan boleh diselenggara:

Kaedah ini menggunakan gabungan senarai tidak tertib bersarang (

s) dan kedudukan mutlak untuk mencipta struktur berbilang peringkat. Setiap peringkat menu diwakili oleh
elemen dan kedudukannya dikawal secara dinamik berdasarkan elemen induknya.

Coretan kod berikut menyediakan gaya CSS untuk menu:

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

.third-level-menu > li {
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

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

.second-level-menu > li {
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

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

.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

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

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

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

Salin selepas log masuk

Struktur HTML untuk menu adalah seperti berikut :

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

Salin selepas log masuk

Pendekatan ini memastikan menu kekal responsif dan menyesuaikan diri dengan pelbagai saiz skrin dan orientasi peranti. Ia juga menghapuskan keperluan untuk JavaScript, menjadikannya serasi dengan semua penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!