Bagaimana Saya Boleh Mencipta Menu Drop-Up CSS Daripada Menu Drop-Down?

Menu Turun dengan CSS Tulen

Artikel ini membincangkan penyesuaian menu lungsur yang dibuat dengan CSS tulen untuk menjadikannya menu "drop-up" bukannya menu "drop-down". Bar menu terletak di bahagian bawah reka letak dan persoalannya ialah bagaimana untuk membukanya ke atas.

Penyelesaian

Untuk mencipta menu lungsur, peraturan CSS perlu dilaraskan.

Demo 1:

Tambah bawah: 100%; kepada peraturan CSS sedia ada:

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

Demo 2:

Untuk mengelakkan submenu daripada dipengaruhi oleh gelagat drop-up, gunakan peraturan ini:

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

Demo 3:

Untuk memulihkan sempadan di sekeliling menu lungsur:

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

Berikut ialah demo JSFiddle: http://jsfiddle.net/W5FWW/4/

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