Bagaimana untuk Mengubah Menu Drop-Down CSS menjadi Menu Drop-Up?

Submenu lungsur turun menu lungsur menegak: dilaksanakan dengan CSS tulen

Untuk menu lungsur turun, diubah menjadi lungsur turun menu adalah perkara biasa, terutamanya apabila bar menu berada di bahagian bawah reka letak. Untuk mencapai ini, kita perlu membuat beberapa perubahan pada gaya CSS.

Soalan: Tukar menu lungsur ke menu lungsur

Memandangkan CSS menu lungsur turun, bagaimana untuk mengubah suai gaya supaya ia menjadi menu lungsur ?

Penyelesaian: Laraskan #menu:hover ul li:hover ul rule

Boleh dilakukan dengan menambahkan bahagian bawah: 100%; hover ul rules untuk melaksanakan fungsi drop-up.

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
}

Penambahbaikan pilihan: hanya gunakan drop-up ke submenu peringkat atas

Untuk mengelakkan submenu daripada turut menggunakan drop-up Untuk kesan, anda boleh menambah peraturan berikut:

#menu>ul>li:hover>ul {
    bottom: 100%;
}

Pertimbangan lain: Pulihkan sempadan

Menambah bahagian bawah: 100% atribut boleh mengalih keluar sempadan submenu. Untuk memulihkan sempadan, anda boleh menambah atribut berikut:

#menu>ul>li:hover>ul {
    bottom: 100%;
    border-bottom: 1px solid transparent
}

Demonstrasi

Berikut ialah beberapa contoh yang menunjukkan teknik ini:

• [ Tunjuk cara 1](https://jsfiddle.net/W5FWW/4/)
• [Demo 2](https://jsfiddle.net/zyp6c/)
• [Demo 3](https ://jsfiddle.net/phkj20zo/)

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Menu Drop-Down CSS menjadi Menu Drop-Up?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!