横向多级导航代码,Css代码库,德仔网

代码语言

代码分类

【Css】横向多级导航

作者: / 发布于2016/4/26/ 766

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

试试其它关键字

　横向多级导航　

同语言下

可能有用的

贡献的其它代码Label