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

Mencipta Menu lungsur Berbilang Tahap dengan CSS Tulen

Menu lungsur turun berbilang peringkat CSS sahaja menawarkan yang bersih dan boleh diakses cara untuk mengatur struktur navigasi yang kompleks pada tapak web. Walaupun banyak pendekatan wujud, penyelesaian optimum berbeza-beza bergantung pada estetika dan kefungsian yang diingini.

Satu teknik yang berkesan melibatkan penggunaan struktur senarai bersarang dan meletakkan sub-menu secara mutlak:

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

Ini kod mentakrifkan submenu peringkat ketiga, yang akan diletakkan di sebelah kanan menu induknya item.

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

Begitu juga, kod ini mentakrifkan submenu peringkat kedua, yang akan diletakkan di bawah item menu induknya.

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

Kod ini mentakrifkan peringkat teratas menu, yang akan mengandungi item menu induk.

Untuk memaparkan sub-menu apabila item menu induknya dilayangkan over:

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

Selain itu, penggayaan boleh digunakan pada pautan menu dan senarai item untuk penyesuaian visual.

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