<!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" />
<title>又一个纯CSS实现的多级下拉菜单</title>
<style type="text/css">/* QQ :1270808767  一起技术交流*/
/* Set up the containing div with a background p_w_picpath */
#outer {width:1000px; height:24px; position:relative;}
/* Style the surrounding 'decoration' for this demo only. This is not required for the menu function */
.menu, .menu ul {list-style-type:none; padding:0; margin:0;}
/* for IE7 to position the tables correctly */
.menu {position:relative;}
/* for IE5.5 and IE6 to position the tables corectly */
* html .menu {position:static;}
.menu li {float:left;  width:125px; height:24px; margin:2px 2px 0 0; }
.menu li.sub { }
.menu li sub1 a:link , .menu li sub2  a:link  { background:#2EA2BA;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; font-size:1em;}
.menu li a {display:block; color:#178BA4; font-family:arial, sans-serif; font-size:14px; line-height:24px; font-weight:bold;     width:100px; text-decoration:none; text-align:center; background:#6AC7DB;}
.menu :hover {color:#fff;background:#2EA2BA;}
.menu li.sub:hover,
.menu li.sub a:hover {position:relative;}
.menu li:hover > a {color:#fff; background:#b9aa93;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul ul.left {position:absolute;left:-9999px; width:128px;}
.menu :hover ul{left:-1px; top:24px; background:transparent url(transparent.gif); padding-top:8px; }
.menu :hover ul :hover ul {padding:9px 3px;left:100px;top:0;}
.menu :hover ul :hover ul.left {left:-106px;}
.menu :hover ul :hover ul :hover ul {padding:9px 3px;left:100px;top:0;}
.menu :hover ul :hover ul :hover ul.left {left:-106px;}
</style>
</head>
<body>
<div id="outer">
<ul class="menu">
<li><a href="http://www.cnzzad.com">首页</a></li>
<li class="sub"><a href="http://www.cnzzad.com">关于生成<comment></a></comment>
<ins><table><tr><td><ul>
<li class="sub1"><a href="../menu/">我们简介<comment></a></comment></a>
</li>
<li class="sub1"><a href="../boxes/">品牌中心<comment></a></comment>
<ins><table><tr><td><ul>
<li class="sub2"><a href="../mozilla/">公司品牌</a></li>
<li class="sub2"><a href="../ie/">子品牌</a></li>
</ul></td></tr></table></ins></a>
</li>
<li><a href="../mozilla/">企业文化</a></li>
</ul></td></tr></table></ins></a>
</li>
<li class="sub"><a href="http://www.cssplay.co.uk">产品服务<comment></a></comment>
<ins><table><tr><td><ul>
<li class="sub2"><a href="../menu/">宠物</a></li>
<li class="sub2"><a href="../layouts/">个人护理</a></li>
<li class="sub2"><a href="../boxes/">家庭园林</a></li>
<li class="sub2"><a href="../mozilla/">其它</a></li>
</ul></td></tr></table></ins></a>
</li>
<li class="sub"><a href="http://www.cssplay.co.uk">新闻事件</a></li>
<li class="sub"><a href="http://www.cssplay.co.uk">人力资源</a></li>
<li class="sub"><a href="http://www.cssplay.co.uk">联系生成<comment></a></comment>
<ins><table><tr><td><ul>
<li class="sub2"><a href="../ie/">联系方式</a></li>
<li class="sub2"><a href="../opacity/">分公司</a></li>
</ul></td></tr></table></ins></a>
</li>
</ul>
</div>
<br><br>
</body>
</html>