Einführungs-Tutorial 14 zum CSS-Webseitenlayout: Vertikales Dropdown- und mehrstufiges Popup-Menü_Grundlegendes Tutorial

Nach Abschluss des vorherigen Tutorials denke ich, dass es viel einfacher sein wird, diesen Abschnitt zu lernen.
Das horizontale Menü implementiert die Dropdown-Steuerung über div und JavaStrict. Was ist mit dem vertikalen Menü? Die Antwort ist ja. Was wir jetzt tun müssen, ist ein vertikales Menü, CSS-Code:

ul { margin:0; padding:0; border-bottom:1px solid #ccc; - size:12px;}
ul li { position:relative;}
li ul { position:absolute; top:0; display:none;}
ul li a { width:108px ; display:block; text-decoration:none; background:#fff; border-bottom:0px;}
ul li a:hover color :#ddd;}
/*Lösen Sie das Problem der falschen Anzeige von ul unter IE*/
* html ul li { float:left; height:1%;}
* html ul li a { height :1%;}
/* end */
li:hover ul,li.over ul { display:block;}


Das Schreiben von CSS-Code behält grundsätzlich die Horizontale bei Die gleiche Idee wird für die Navigation verwendet, aber der Unterschied besteht darin, dass wir position:relative für ul li{} verwenden, um eine Mausinteraktion zwischen der Navigation und der Hauptnavigation zu erreichen zur relativen Positionierung. Für li ul{} verwendet die Unternavigation position:absolute; die absolute Positionierungsmethode relativ zur Navigation sorgt dafür, dass ihre Position nach der Mausinteraktion konsistent ist.
Vielleicht ist Ihnen aufgefallen, dass am Ende des CSS-Codes eine Kommentardefinition * html ul li und * html ul li a hinzugefügt wurde. Der hier verwendete CSS-Hack liegt daran, dass verschiedene Browser den Code unterschiedlich analysieren, und wird verwendet, um bei jedem Browser den gleichen Effekt zu erzielen. Dieser Code kann nur vom IE-Browser analysiert werden, und andere Browser werden ein Auge zudrücken.
Der endgültige Anzeigeeffekt dieses Beispiels ist wie folgt:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Vertikales und mehrstufiges Dropdown-Popup-Men眉 www.aa25.cn</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>