Tutoriel d'introduction à la mise en page Web CSS 14 : menu déroulant vertical et menu contextuel à plusieurs niveaux_Tutoriel de base

Après avoir terminé le tutoriel précédent, je pense qu'il sera beaucoup plus facile d'apprendre cette section.
Le menu horizontal implémente le contrôle déroulant via div et JavaStrict. Qu'en est-il du menu vertical ? La réponse est oui. Ce que nous devons faire maintenant, c'est un menu vertical, code CSS :

ul { margin:0; list-style:none; border-bottom:1px solid #ccc; - size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0;}
ul li a { width:108px; ; display:block; text-decoration:none; color:#666666; background:#fff; border:1px solid #ccc; color :#ddd;}
/*Résoudre le problème d'affichage incorrect de ul sous IE*/
* html ul li { float:left; height:1%;}
* html ul li a { height :1%;}
/* end */
li:hover ul,li.over ul { display:block;}


L'écriture du code CSS maintient essentiellement l'horizontale orientation La même idée est utilisée pour la navigation, mais la différence est que pour obtenir une interaction de la souris entre la navigation et la navigation principale tout en conservant leurs positions relatives, nous utilisons position:relative; for ul li{} pour effectuer le conversion. au positionnement relatif. La méthode de positionnement position:absolute; absolue par rapport à la navigation est utilisée pour li ul{}, c'est-à-dire la sous-navigation, afin que sa position après interaction avec la souris soit cohérente.
Peut-être avez-vous remarqué qu'une définition de commentaire * html ul li et * html ul li a a été ajoutée à la fin du code css. Le hack CSS utilisé ici est dû au fait que différents navigateurs analysent le code différemment et sont utilisés pour obtenir le même effet sur chaque navigateur. Ce code ne peut être analysé que par le navigateur IE, et les autres navigateurs fermeront les yeux.
L'effet d'affichage final de cet exemple est le suivant :

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">Menu d茅roulant vertical et pop-up