如何解决二级标签对另一级的div布局的影响
就是在设置好二级菜单后，在下面的中间布局中有三列，都是浮动的，当二级菜单展开后会是中间的布局收到影响，怎么解决”
我的代码如下：
<!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>无标题文档</title>
<style type="text/css">
#all{width:666px;margin:0 auto;background-color:#99FFFF}
#head{}
#logo{float:left;}
#login{float:right;}
#pop{position:absolute;margin-top:50px;margin-left:250px;}
#nav ul li{width:80px;}
#nav ul{border-bottom:6px #FFCC33 solid;padding-bottom:6px;}
#nav ul li a{width:80px;}
#left{background-color:#3366CC;width:222px;float:left;}
#zhong{background-color:#3333FF;width:222px;float:left;}
#bottom{background-color:#FF9999;width:222px;float:left;}
#footer{background-color:#999999}
#nav ul li ul{display:none}
#nav ul li:hover ul{display:block;}
#nav ul li ul li{margin-top:1px;background-color:#0099FF;vertical-z:1;}
#nav ul li ul{border:0px;margin-left:-42px;display:none;position:relative;}
li{list-style:none;float:left;margin:0 2px;margin-top:-10px;text-align:center;}
a{text-decoration:none;display:block;}
a:hover{background-color:#FF9900;height:30px;line-height:30px;margin-top:-10px;display:block}
.cheng{background-color:#FF9900;margin-top:-20px;line-height:30px;height:30px;position:relative;}
.STYLE1 {
color: #660066;
font-size: x-large;
font-family: "新宋体";
}
</style>
</head>
<body>
<div id="all">
<div id="head">
<div id="logo"><img src="logo.png" /></div>
<div id="login">
<ul>
<li ><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
</ul>
</div>
<div class="STYLE1" id="pop">欢迎来到IT组！！！</div>
<div style="clear:both"></div>
<div id="nav">
<ul>
<li class="cheng"><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">left</div>
<div id="zhong">zhong</div>
<div id="bottom">bottom</div>
</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
</body>
</html>
