Tutorial pengenalan reka letak halaman web CSS 14: Menu lungsur turun menegak dan menu timbul berbilang peringkat_Tutorial asas

Selepas menamatkan tutorial sebelumnya, saya rasa lebih mudah untuk mempelajari bahagian ini.
Menu mendatar melaksanakan kawalan lungsur melalui div dan JavaStrict. Bagaimana pula dengan menu menegak? Jawapannya ya. Apa yang perlu kita lakukan sekarang ialah menu menegak, kod css:

ul { margin:0; list-style:none; - saiz:12px;}
ul li { kedudukan:relatif;}
li ul { position:absolute; atas:0; ; display:blok; text-decoration:none; color :#ddd;}
/*Selesaikan masalah paparan ul yang salah di bawah IE*/
* html ul li { float:left;}
* html ul li a { ketinggian :1%;}
/* end */
li:hover ul,li.over ul { display:block;}


Penulisan kod css pada asasnya mengekalkan mendatar orientasi Idea yang sama digunakan untuk navigasi, tetapi perbezaannya ialah untuk mencapai interaksi tetikus antara navigasi dan navigasi utama sambil mengekalkan kedudukan relatifnya, kami menggunakan position:relative untuk ul li{} untuk menjadikannya kedudukan kepada kedudukan relatif. Untuk li ul{}, iaitu, sub-navigasi menggunakan position:absolute kaedah penentududukan mutlak berbanding dengan navigasi menjadikan kedudukannya konsisten selepas interaksi tetikus.
Mungkin anda perasan bahawa definisi ulasan * html ul li dan * html ul li a telah ditambahkan pada penghujung kod css. Hack CSS yang digunakan di sini adalah kerana pelayar yang berbeza menghuraikan kod secara berbeza dan digunakan untuk mencapai kesan yang sama pada setiap pelayar. Kod ini hanya boleh dihuraikan oleh pelayar IE, dan pelayar lain akan menutup mata.
Kesan paparan akhir contoh ini adalah seperti berikut:

Menu timbul turun menegak dan berbilang peringkat www.aa25.cn<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style> ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute; left:119px; top:0; display:none;} ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;} ul li a:hover { background-color:#ddd;} /*瑙ｅ</style>