Bagaimanakah Saya Boleh Mencipta Menu Jatuh Bawah Pembukaan Ke Atas Menggunakan Hanya CSS?

Menu Turun Yang Dibuka Ke Atas dengan CSS Tulen

Cabaran untuk menukar menu lungsur ke menu "jatuh" yang terbuka ke atas semata-mata menggunakan CSS memerlukan sedikit pengubahsuaian pada penggayaannya. CSS yang dicadangkan di bawah akan mencapai kesan ini:

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

Penjelasan

Dengan menambah bahagian bawah: 100%; kepada peraturan di atas, submenu akan diletakkan di bahagian bawah item menu induknya dan kelihatan "jatuh" apabila dituding di atas.

Pemurnian Tambahan

Untuk kesan yang lebih halus, anda boleh mengalih keluar pertindihan antara submenu dengan menambah:

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

Ini memastikan bahawa hanya submenu item menu yang dilegar akan dibuka ke atas.

Demo

Untuk mengalami kesan drop-up, anda boleh merujuk kepada demo berikut: http://jsfiddle.net/W5FWW/4/.

Mengekalkan Sempadan

Jika menu asal mempunyai sempadan, anda boleh memulihkannya dengan menambah:

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

Ini akan mengekalkan sempadan sambil mengekalkan fungsi drop-up.

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