企业网站左边导航

2015/08/11 43526
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script src="js/z-tree.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
html, body {font:normal 12px 'Microsoft YaHei';margin:0; padding:0;border:none;height:100%;width:100%; background: #dce2ed;}
div,p,ul,li,form,input,h1,h2,h3,h4,h5,h6,dl,dt,dd,img{padding:0; margin:0;}
input, label{vertical-align:middle}  
ol,ul,li {list-style:none;}
img{vertical-align:middle;border:0;display:inline-block;}
.button{ border: none; cursor:pointer;}
input[type=radio],input[type=checkbox],input[type=button], label {cursor:pointer;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
em{font-style:normal;}
.c_fl{float:left;}
.c_fr{float:right;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {zoom:1; clear:both;content: ".";display: block;}
.clear{ clear:both;}
table{border:0;margin:0; width:100%;border-collapse:collapse;}
table,td,tr,th{font-size:12px;}
a {color:#000; text-decoration: none;font-family:'Microsoft YaHei'}
.timehide{display:none;}
.timeshow{display:block;}
/*菜单开始*/
.leftmenu{width:215px;border-right:red;margin:10px;border-right:1px solid #cdd4de;overflow:hidden;}
.leftmenu li{width:100%;}
.leftmenu a{display:block;height:24px;line-height:24px;color:#4f5359;margin:3px auto;}
.leftmenu a span{display:block;float:left;height:24px;width:24px;}
span.open{ background:url(images/dot_01.png) no-repeat center left;}
span.close{background:url(images/dot_02.png) no-repeat  center left;}
/*一级*/
.leftmenu > li  h3{display:block;background:#666e79;height:42px;line-height:42px;padding-left:26px;color:#fff;}
/*二级之后*/
.leftmenu li ul a:hover,.leftmenu li ul a.active{ background:#95bb9e;color:#fff;}
.leftmenu li ul a:hover span.open,.leftmenu li ul a.active span.open{ background:url(images/dot_01_hover.png) no-repeat center left;}
.leftmenu li ul a:hover span.close,.leftmenu li ul a.active span.close{ background:url(images/dot_02_hover.png) no-repeat center left;}
.leftmenu > li ul li{line-height:24px;}
.leftmenu > li >ul >li >a{padding-left:15px;}
.leftmenu > li >ul >li >ul >li >a{padding-left:30px;}
.leftmenu > li >ul >li >ul >li >ul >li >a{padding-left:45px;}
.leftmenu > li >ul >li >ul >li >ul >li >ul >li >a{padding-left:60px;}
.leftmenu > li >ul >li >ul >li >ul >li >ul >li >ul >li >a{padding-left:75px;}
.leftmenu > li >ul >li >ul >li >ul >li >ul >li >ul >li >ul >li >a{padding-left:90px;}
</style>
</head>

<body>
<div>
<ul class="leftmenu"> 
 <li><h3>基础教育评估云社区</h3>
   <ul>
     <li><a href="#"><span></span>山东省</a> 
      <ul> 
          <li><a href="#"><span></span>青岛市教育局</a>
            <ul> 
              <li><a href="#"><span></span>青岛市实验小学</a>
                 <ul> 
                    <li><a href="#"><span></span>一年级</a>
                       <ul>
                         <li><a href="#"><span></span>一年级1班</a></li>
                         <li><a href="#"><span></span>一年级2班</a></li>  
                       </ul>
                    </li> 
                    <li><a href="#"><span></span>二年级</a>
                       <ul>
                         <li><a href="#"><span></span>二年级1班</a></li>
                         <li><a href="#"><span></span>二年级2班</a></li>  
                       </ul>
                    </li> 
                    <li><a href="#"><span></span>三年级</a>
                       <ul>
                         <li><a href="#"><span></span>三年级1班</a></li>
                         <li><a href="#"><span></span>三年级2班</a></li>  
                       </ul>
                    </li> 
                    <li><a href="#"><span></span>四年级</a>
                       <ul>
                         <li><a href="#"><span></span>四年级1班</a></li>
                         <li><a href="#"><span></span>四年级2班</a></li>  
                       </ul>
                    </li> 
                 </ul>
              </li> 
             </ul>
          </li> 
       </ul>
     </li>
     <li><a href="#"><span></span>张店教育局</a></li>
   </ul> 
 </li> 
 
</ul> 
</div>
</body>
</html>
代码片段
