知识库

实用纯CSS实现的横向多级导航特效

来源: 本站    类别: 知识库    日期: 2016/12/2

 <style type="text/css">
*{padding: 0; margin: 0; list-style: none;}
.list1 > a{text-decoration: none; color: #fff;}
.list1{position: relative; width: 100px; height: 36px; line-height: 36px; text-align: center; border-bottom: 1px solid #ddd; background: #2144A0;}
.menu1,.menu2{border: 1px solid #ddd; width: 100px; border-bottom: none;}
.menu2{display: none; width: 100px; position: absolute; left: 100px; top: -1px; z-index: 998;}
.list2{border-bottom: 1px solid #ddd;}
.list2 > a{text-decoration: none; color: #999;}
.list1:hover > a{color: #999;}
.list2:hover a{color: blue;}
.list1:hover .menu2{display: block;}
</style>
<div>
 <ul class="menu1">
  <li class="list1">
   <a href="#">AAAAA</a>
   <ul class="menu2">
    <li class="list2"><a href="#">11111</a></li>
    <li class="list2"><a href="#">22222</a></li>
    <li class="list2"><a href="#">33333</a></li>
   </ul>
  </li>
  <li class="list1"><a href="#">BBBBB</a></li>
  <li class="list1"><a href="#">CCCCC</a></li>
 </ul>
</div>

相关文章


Copyright © 2004 - 2022 CNHWW Inc. All Rights Reserved
石家庄市征红网络科技有限公司版权所有 邮政编码:050051
服务电话:0311-85315152 13931185013 在线客服QQ:81447932 / 81447933 邮箱: cnhww@163.com