css 下拉菜单联动 导致下面的div也跟着向下浮动 如何解决

代码
#menu{ width:560px; float:left;line-height:38px; background:url(../images/navsin.jpg) repeat-x; position:relative; z-index:10000;}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu ul li {
float: left;
display: inline;
font: 0.9em Arial, Helvetica, sans-serif;
height: 30px;
width: 100px;
list-style: none;
}
#menu ul li a {
color: #FFF;
text-decoration: none;
line-height: 38px;
width: 91px;
margin: 0px;
padding: 0px 0px 0px 8px;
display: block;
}
#menu ul li ul li { height:25px;}
#menu ul li ul li a {
background: #666;
line-height:24px;
}
#menu ul li a:hover { background: #666; }
#menu ul li ul { display:none;}
#menu ul li:hover ul { display:block; }
#menu ul li ul li a:hover { background: #333; }

<div id="menu">
<ul>
<li><a href="">菜单一</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a> </li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
<li><a href="">菜单二</a></li>
<li><a href="">菜单三</a></li>
</ul>
</div>
</div>
<div class="top"><image src="../images/home_1.gif" width="958" height="212"></div>

怎么改 加上z-index 也不管用