Bagaimanakah Saya Boleh Mencipta Menu Jatuh Turun Berbilang Peringkat Menggunakan CSS sahaja?

Menu Turun Berbilang Peringkat CSS Tulen: Panduan Komprehensif

Mencipta menu lungsur berbilang peringkat dengan CSS boleh menjadi teknik yang hebat untuk mengatur struktur navigasi yang kompleks. Walaupun kaedah lama mungkin masih wujud, artikel ini membentangkan pendekatan moden dan cekap untuk mencapai fungsi ini menggunakan CSS tulen.

Kunci untuk membina menu berbilang peringkat dalam CSS terletak pada memanipulasi kedudukan dan memaparkan sifat menu barang. Dengan menggunakan kedudukan mutlak untuk lungsur turun dan mengawal keterlihatannya dengan sifat paparan, anda boleh membuat menu dinamik dan boleh disesuaikan.

Kod yang disediakan di bawah menggambarkan struktur menu lungsur turun tiga peringkat. Menu peringkat atas mengandungi empat kategori utama, masing-masing mempunyai potensi lungsur turun. Tahap kedua dan ketiga melanjutkan secara menegak daripada item induk masing-masing, memberikan pandangan hierarki yang jelas.

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

Untuk melaksanakan menu ini dalam HTML, gunakan penanda berikut:

Oleh menggabungkan coretan CSS dan HTML ini, anda boleh mencipta menu lungsur berbilang peringkat berfungsi penuh yang menyediakan pengalaman navigasi mesra pengguna dengan elegan visual.

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