Bagaimanakah Saya Boleh Membuat Menu Jatuh Turun CSS Tulen Terbuka Ke Atas Daripada Ke Bawah?

Menu Turun yang Dibuka Ke Atas dengan CSS Tulen

Menu lungsur turun CSS tulen ialah cara terbaik untuk menavigasi tapak web secara intuitif. Walau bagaimanapun, dalam sesetengah reka bentuk, anda mungkin mahu menu dibuka ke atas dan bukannya ke bawah. Begini cara anda boleh mencapai ini semata-mata melalui CSS:

Masalahnya:
Anda mempunyai menu lungsur turun dengan CSS yang dibuka ke bawah, tetapi anda mahu menukarnya untuk membuka ke atas , mengekalkan kedudukan dan fungsinya.

Penyelesaian:
Untuk membuka menu lungsur turun ke atas, anda perlu mengubah suai peraturan CSS yang meletakkan submenu. Begini caranya:

Pilihan 1: Laraskan Margin-atas

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

Tukarnya kepada:

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

Dengan menambah bahagian bawah: 100 %;, anda akan memaksa submenu untuk muncul di atas item menu induk.

Pilihan 2: Submenu Sasaran Khusus

Jika anda tidak mahu semua submenu dibuka ke atas, anda boleh menyasarkan submenu khusus menggunakan peraturan ini:

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

Pilihan 3: Demo Alternatif

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

Pendekatan alternatif ini mengekalkan sempadan pada submenu.

Dengan melaksanakan CSS ini pengubahsuaian, anda boleh dengan mudah menukar menu lungsur CSS tulen anda yang menghadap ke bawah kepada menu yang menghadap ke atas. Ingat untuk melaraskan nilai jidar mengikut keperluan agar sesuai dengan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Menu Jatuh Turun CSS Tulen Terbuka Ke Atas Daripada Ke Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!