search

Home >Web Front-end >CSS Tutorial >How to implement css three-level drop-down menu

How to implement css three-level drop-down menu

不言
不言Original
2018-06-28 15:11:201766browse

This article mainly introduces the method of implementing CSS three-level drop-down menu, which has a certain reference value. Now I share it with you. Friends in need can refer to it


<!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>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of CSS filters filtering text at the same time

css div multi-step progress bar Implementation code

The above is the detailed content of How to implement css three-level drop-down menu. For more information, please follow other related articles on the PHP Chinese website!

php css
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 realizes the effect of 3D fonts with shadowNext article：css3 realizes the effect of 3D fonts with shadow

Related articles

See more