Dans la structure actuelle des pages Web, la barre de menus de navigation occupe une position très importante, car elle peut non seulement afficher des exemples, mais également vous donner l'impression la plus intuitive du contenu. Comme nous le savons tous, en HTML
Le principe de l'utilisation de CSS3 pour implémenter le menu déroulant de navigation
Tout d'abord, utilisez le
Étapes pour utiliser CSS3 pour implémenter le menu déroulant de navigation
Étape 1 : Utiliser HTML pour créer un style de menu
<nav> <ul> <li><a href="#">导航一</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">导航二</a></li> <li><a href="#">导航三</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a> <ul> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">导航四</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">导航五</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">导航六</a></li> </ul> </nav>
Étape 2 : Utilisez CSS3 pour implémenter un menu déroulant déclenché par le survol de la souris
nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#efefef,#bbbbbb); padding:0 20px; display:inline-table; position:relative; box-shadow:1px 1px 3px #666; } nav ul ul { display:none; } nav ul li { float:left; } nav ul::after { content:""; display:block; clear:both; } nav ul li a { display:block; padding:25px 40px; color:#000; text-decoration:none; font-family:"微软雅黑"; } nav ul li:hover > ul { display:block; } nav ul li:hover { background:linear-gradient(to bottom,#4f5964,#5f6975); } nav ul li:hover a { color:#FFF; } nav ul ul { background:#5f6975; border-radius:0; position:absolute; top:100%; padding:0; } nav ul ul li { float:none; border-top:1px solid #6b727c; border-bottom:1px solid #575f6a; } nav ul ul li a { color:#FFF; } nav ul ul li a:hover { background:#4b545f; } nav ul ul ul { width:100%; position:absolute; left:100%; top:50%; }
Étape 3 : Embellissez-le selon les exigences du style du menu
Le style du menu déroulant est comme indiqué sur l'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!