<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<div class="menu">
<ul>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">菜单一</a>
<ul class="second">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">二级菜单_11</a>
<ul class="third">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">三级菜单_11</a>
<ul class="fourth">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">四级菜单_11</a>
<ul class="fifth">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">五级菜单_11</a>
<ul class="sixth">
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_13</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">五级菜单_11</a>
<ul class="sixth">
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_13</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">五级菜单_11</a>
<ul class="sixth">
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_13</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">五级菜单_12</a>
<ul class="sixth">
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_12</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_13</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_12</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_13</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_14</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">二级菜单_12</a>
<ul class="third">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">三级菜单_21</a>
<ul class="fourth">
<li><a href="http://www.cnblogs.com/freespider/">四级菜单_21</a></li>
<li><a href="http://www.cnblogs.com/freespider/">四级菜单_22</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_22</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_23</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_24</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">菜单二</a>
<ul class="second">
<li><a href="http://www.cnblogs.com/freespider/">二级菜单_21</a></li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">二级菜单_22</a>
<ul class="third">
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_21</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_22</a></li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">三级菜单_23</a>
<ul class="fourth">
<li><a href="http://www.cnblogs.com/freespider/">四级菜单_21</a></li>
<li><a href="http://www.cnblogs.com/freespider/">四级菜单_22</a></li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">四级菜单_23</a>
<ul class="fifth">
<li><a href="http://www.cnblogs.com/freespider/">五级菜单_21</a></li>
<li><a href="http://www.cnblogs.com/freespider/">五级菜单_22</a></li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">五级菜单_23</a>
<ul class="sixth">
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_21</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_22</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_23</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_24</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_25</a></li>
<li><a href="http://www.cnblogs.com/freespider/">六级菜单_26</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">菜单三</a>
<ul class="second">
<li><a href="http://www.cnblogs.com/freespider/">二级菜单_31</a></li>
<li><a href="http://www.cnblogs.com/freespider/">二级菜单_32</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">菜单四</a>
<ul class="second">
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/freespider/">二级菜单_41</a>
<ul class="third">
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_41</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_42</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_43</a></li>
<li><a href="http://www.cnblogs.com/freespider/">三级菜单_44</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cnblogs.com/freespider/">二级菜单_42</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
//********************表现层部分*****************
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {
font-size:12px;
}
.menu li {/*水平菜单*/
float:left;
list-style:none;
position:relative;/*把包含块移动li元素*/
}
.menu a {
display:block;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★*/
}
.menu a:hover {
background:#369;
color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {
visibility:hidden;/*隐藏所有子菜单（二级的,三级的）*/
position:absolute;
left:0px;
top:32px;
}
/*指定是显示二级子菜单*/
.menu ul li:hover ul.second,/*非IE6*/
.menu ul a:hover ul.second{/*IE6*/
visibility:visible;
}
.menu ul ul li {
clear:both;/*垂直显示*/
text-align:left;
}
.menu .third,.menu .fourth,.menu .fifth,.menu .sixth{
top:0px;/*重设子菜单相对于包含块哪个位置出现*/
left:100px;
}
/*指定是显示三级子菜单*/
.menu ul ul li:hover ul.third,
.menu ul ul a:hover ul.third{
visibility:visible;
}
/*指定是显示四级子菜单*/
.menu ul ul ul li:hover ul.fourth,
.menu ul ul ul a:hover ul.fourth{
visibility:visible;
}
/*指定是显示五级子菜单*/
.menu ul ul ul ul li:hover ul.fifth,
.menu ul ul ul ul a:hover ul.fifth{
visibility:visible;
}
/*指定是显示六级子菜单*/
.menu ul ul ul ul ul li:hover ul.sixth,
.menu ul ul ul ul ul a:hover ul.sixth{
visibility:visible;
}
/*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/
/*二级子菜单*/
.menu ul ul a:hover{
background:black;
color:white;
}
/*三级子菜单*/
.menu ul ul ul a:hover{
background:#B45B3E;
color:#369;
}
.menu ul ul ul ul a:hover{
background:#FFE8AA;
color:#68DFFB;
}
.menu ul ul ul ul ul a:hover{
background:#8080C0;
color:#F8F8F8;
}
.menu ul ul ul ul ul ul a:hover{
background:#f00;
color:#000;
}
.menu table{
border-collapse:collapse;
}
</style>
