欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

css三级下拉菜单实现的方法

程序员文章站 2022-03-16 09:53:08
...
这篇文章主要介绍的内容是关于css三级下拉菜单实现的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

css三级下拉菜单实现的方法

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何解决CSS滤镜同时过滤文字的问题

css+div多步骤进度条的实现代码

以上就是css三级下拉菜单实现的方法的详细内容，更多请关注其它相关文章！

相关标签： css三级下拉菜单

上一篇： 怎么外部引入css

下一篇： win10提示以太网络电缆被拔出怎么解决

推荐阅读