search

博客列表 >右侧菜单栏

右侧菜单栏

南鸢离梦的博客
南鸢离梦的博客原创
2019年11月14日 10:26:47598浏览
  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中的基本运算-第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多