Maison >interface Web >tutoriel CSS >Comment implémenter le menu déroulant CSS à trois niveaux

Comment implémenter le menu déroulant CSS à trois niveaux

不言original: 2018-06-28 15:11:201765parcourir

Cet article présente principalement la méthode de mise en œuvre du menu déroulant CSS à trois niveaux. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

<.>

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type = "text/css">
/*设置通配符样式*/ 
*{
 margin:0; 
 padding:0;
}
body{
 font-size:12px;
}
ul{
 list-style:none;
}
a{
 text-decoration:none;
}</p>
<p>/*设置二级导航样式*/ 
.nav {
 width:500px; 
 height:30px;
 background-color:#b4b4b4;
 /*导航栏居中*/
 margin:auto;
}
.nav ul li { 
 width:100px; 
 height:30px; 
 float:left; 
 position:relative;
}
.nav ul li a {
 display:block;
 width:96px; 
 border:2px solid gray; 
 height:26px; 
 line-height:26px; 
 text-align:center;
}
.nav ul li a:hover { 
 background-color:yellow;
}</p>
<p>/*设置一级导航样式*/
.nav ul li ul{
 display:none;
}
.nav ul li:hover ul{
 display:block;
 width:100px;
 position:absolute;
 top:30px;
 left:0;
 background-color:white;
}
.nav ul li:hover ul li a{
 display:block;
 width:96px;
 height:26px;
 line-height:26px;
 border:2px solid gray;
 text-align:center;
}
.nav ul li:hover ul li a:hover{
 background-color:orange;
}</p>
<p>/*设置三级导航样式*/
.nav ul li:hover ul li ul { 
 display:none;
}
.nav ul li:hover ul li:hover ul{ 
 display:block; 
 width:100px; 
 position:absolute; 
 top:0px; 
 left:100px;
 background-color:#b4b4b4;
}
.nav ul li:hover ul li:hover ul li { 
 width:100px; 
 height:30px; 
}
.nav ul li:hover ul li:hover ul li a { 
 display:block; 
 width:96px; 
 height:26px; 
 line-height:26px; 
 border:2px solid gray; 
 text-align:center; 
}
.nav ul li:hover ul li:hover ul li a:hover { 
 background-color:#00CC00;
}
.nav ul li:hover ul .nav_jw ul { 
 display:none;
}
.nav ul li:hover ul .nav_jw:hover ul{ 
 display:block; 
 width:100px; 
 position:absolute; 
 top:0px; 
 left:-100px;
 background-color:#b4b4b4;
}
.nav ul li:hover ul .nav_jw:hover ul li { 
 width:100px; 
 height:30px; 
}
.nav ul li:hover ul .nav_jw:hover ul li a { 
 display:block; 
 width:96px; 
 height:26px; 
 line-height:26px; 
 border:2px solid gray; 
 text-align:center; 
}
.nav ul li:hover ul .nav_jw:hover ul li a:hover { 
 background-color:#00CC00;
}</p>
<p></style>
</head>
<body>
<p class = "nav">
<ul>
<li><a href = "#">一级导航</a>
 <ul>
 <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>
   <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>  
 </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>  
 <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 class="nav_jw"><a href = "#">二级导航</a>
  <ul>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
  </ul>
 </li>  
 <li class="nav_jw"><a href = "#">二级导航</a>
  <ul>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
  </ul>
 </li>  
 <li class="nav_jw"><a href = "#">二级导航</a>
  <ul>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
   <li><a href = "#">三级导航</a></li>
  </ul>
 </li>  
 </ul>
</li>
</ul>
</p>
</body>
</html>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème des filtres CSS filtrant le texte en même temps

css+div barre de progression en plusieurs étapes Le code d'implémentation de

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!

php css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：css3 réalise l'effet des polices 3D avec ombreArticle suivant：css3 réalise l'effet des polices 3D avec ombre

Articles Liés

Voir plus