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:
