css中怎么实现一个三级下拉菜单

今天就跟大家聊聊有关css中怎么实现一个三级下拉菜单，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南州晴隆免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

/*设置通配符样式*/ 
*{
 margin:0; 
 padding:0;
}
body{
 font-size:12px;
}
ul{
 list-style:none;
}
a{
 text-decoration:none;
}

/*设置二级导航样式*/ 
.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;
}
/*设置一级导航样式*/
.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;
}
/*设置三级导航样式*/
.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;
}





一级导航
 

 
二级导航
  

   
三级导航
   
三级导航
   
三级导航
  
 
  
 
二级导航
  

   
三级导航
   
三级导航
   
三级导航
  
 
  
 
二级导航
  

   
三级导航
   
三级导航
   
三级导航
  
 
  
 

一级导航
 

 
二级导航
  
 
二级导航
  
 
二级导航
  
 

一级导航
 

 
二级导航
  
 
二级导航
  
 
二级导航
  
 

一级导航
 

 
二级导航
  
 
二级导航
  
 
二级导航
  
 

一级导航
 

 二级导航
  

   
三级导航
   
三级导航
   
三级导航
  
   
 二级导航
  

   
三级导航
   
三级导航
   
三级导航
  
   
 二级导航
  

   
三级导航
   
三级导航
   
三级导航