search

博客列表 >纯css向右展开多级导航菜单代码

纯css向右展开多级导航菜单代码

南鸢离梦的博客
南鸢离梦的博客原创
2019年11月05日 11:38:32625浏览
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>纯css向右展开多级导航菜单代码</title>
  4. <style>   
  5.  *{margin: 0;padding: 0;}   
  6.   .qdxw{ margin:100px 100px;}    
  7.   .qdxw ul a{width: 200px;font-family: '微软雅黑';font-size: 14px;color: #000;text-decoration: none;}
  8.   .qdxw ul a:hover{color: #5fb878;text-decoration: none;}
  9.   .qdxw ul li{width: 200px;height: 35px;line-height: 35px;text-align: center;position: relative;}   
  10.   .qdxw ul li:hover{background: aliceblue;}
  11.   .qdxw ul{width: 200px;height: auto;position: absolute;background: aliceblue;list-style: none;}
  12.   .qdxw ul.nav2{left: 199px;top: 0;display: none;}   
  13.   .qdxw ul.nav3{left: 199px;top: 0;display: none;}    
  14.   .qdxw .nav1 .li1:hover ul.nav2{display: block;background: aliceblue;}
  15.   .qdxw .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}
  16. </style>
  17. </head>
  18. <body>
  19.     <div class="qdxw">
  20.     <ul class="nav1">    
  21.         <li class="li1">  <a href="#">一级导航是我们</a>        
  22.             <ul class="nav2">            
  23.                 <li class="li2"><a href="#">二级导航</a></li>            
  24.                 <li class="li2"><a href="#">二级导航</a></li>        
  25.             </ul>    
  26.         </li>
  27.     </ul>
  28.     </div>
  29.     <br><br><br>
  30. <!--代码部分-->
  31.     <div class="qdxw">
  32.     <ul class="nav1">    
  33.         <li class="li1">  <a href="#">一级导航是我们</a>        
  34.             <ul class="nav2">            
  35.                 <li class="li2"><a href="#">二级导航</a>                
  36.                     <ul class="nav3">                    
  37.                         <li class="li3"><a href="#">三级导航</a></li>                    
  38.                         <li class="li3"><a href="#">三级导航</a></li>               
  39.                      </ul>            
  40.                 </li>            
  41.                 <li class="li2"><a href="#">二级导航</a></li>        
  42.             </ul>    
  43.         </li>
  44.     </ul>
  45.     </div>
  47.     <!--代码部分end-->
  48. </body>
上一条：弹性布局之弹性容器 - PHP培训九期线上班下一条：弹性布局之弹性容器的常用属性--php培训9期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多