【Web Tricks 7】纯CSS实现的层级（树形）菜单

最近在做后台的导航条的时候，有一个问题是菜单项很多，于是需要做一个层级（树形）

菜单，本来是打算用JS来实现，后来想了想还是去用ＣＳＳ来实现，这样子对于浏览器的

支持会大一些，而且不会出现那种闪屏现象，好了废话不说，上代码

<style type="text/css">
.menu { display:block; font-family: arial, sans-serif; width:100%; position:fixed; height:auto; background: #3B3B3F;z-index: 5;padding-left: 80px;font-weight: bold;}
.menu ul { padding:0; margin:0; list-style-type: none;}
.menu ul li { float:left; width:131px; background: #3B3B3F;}
.menu ul li.end { height:35px; float:right; width:10px; background: #3B3B3F;}
.menu ul li a, 
.menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:105px; height:35px; color:#2DC5F5; line-height:34px; font-size:14px;background: #3B3B3F;}
.menu ul li.first a, 
.menu ul li.first a:visited {display:block; text-align:center; text-decoration:none; width:110px; height:35px; color:#2DC5F5; line-height:34px; font-size:14px;background: #3B3B3F;}
.menu ul li ul {display: none;}
.menu ul li:hover .menu ul li a {color:#fff;  background:  #3B3B3F; }
.menu ul li:hover.first a {color:#fff;  background:  #3B3B3F; }
.menu ul li:hover ul {display:block; position:absolute;left:80;top:35px; width:805px;}
.menu ul li:hover ul li a { float:left;display:block; background:#3B3B3F; }
.menu ul li:hover ul li a:hover {background:#3B3B3F; color:#fff;}
</style>
<div class="menu">
  <ul>
    <li class="first"><a href="#">网站图标</a></li>
    <li><a class="hide" href="#">一级管理</a>
      <ul>
        <li><a href="#">二级管理</a></li>    
        <li><a href="#">二级管理</a></li>    
      </ul>
    </li>
    <li><a class="hide" href="#">一级管理</a>
      <ul class="right_side">    
        <li><a href="#">二级管理</a></li>    
        <li><a href="#">二级管理</a></li>       
        <li><a href="#">二级管理</a></li> 
      </ul>
    </li>
    <li><a class="hide" href="#">一级管理</a>
      <ul>
        <li><a href="/admin/analysis">二级管理</a></li>
        <li><a href="/admin/debug">二级管理</a></li>  
        <li><a href="/admin/log">二级管理</a></li> 
        <li><a href="/admin/cut">二级管理</a></li>    
      </ul>
    </li>
  </ul>
</div>

下面是简单的效果图