CSS弹出菜单，怎么能避免弹出菜单后，网页下面的内容随之下移？

找到一段CSS制作下拉菜单的代码，试用后效果确实不错，但还有个问题，弹出菜单后，二级菜单不是浮动在网页下面内容的上层，而是独占了网页的一横条，网页下面的部分会被往下移动。... 找到一段CSS制作下拉菜单的代码，试用后效果确实不错，但还有个问题，弹出菜单后，二级菜单不是浮动在网页下面内容的上层，而是独占了网页的一横条，网页下面的部分会被往下移动。不知怎么样可以让网页后面部分不往下移，而是固定，让菜单在这部分的上层？
<!DOCTYPE html>
<Head>
<style>
div,ul,li{margin:0;padding:0; z-index:99; position:static;}
#div2{display:none;margin-top:2px;}
ul#ul1 li{float:left;width:100px;line-height:30px;text-align:center;margin-left:1px;background-color:yellow;}
ul#ul1 li.second{height:30px}
ul#ul1 li.first:hover #div2{display:block}
#div2 ul#ul2 li{height:30px;line-height:30px;width:100px;margin-top:2px;background-color:red}
#div2 ul#ul2 li:hover{background-color:#fff}
</style>
</head>
<body>
<div class="nav">
<ul id="ul1">
<li class="first"><a href="#">首页</a>
<div id="div2">
<ul id="ul2">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</div>
</li>
<li class="second"><a href="#">风格展示</a></li>
<li class="second"><a href="#">活动专题</a></li>
</ul>
</div><p> </p>
<div style="position:relative; z-index:1;">
<p>test</p>
</div>
</body>
</html> 展开

 我来答