<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<style>
.nav .li
{
position:relative;
width:100px;
float:left;
}
.nav2{
position: absolute;
display: none;
left:0;
top:19px;
}
</style>
</head>
<body>
<div class="nav">
<div class="li"><a href="/">首頁</a></div>
<div class="li"><a href="#">新聞動態</a></div>
<div class="li"><a href="#">一級菜單</a>
<div class="nav2">
<div><a href="#">二級菜單</a></div>
<div><a href="#">二級菜單</a></div>
<div><a href="#">二級菜單</a></div>
<div><a href="#">二級菜單</a></div>
<div><a href="#">二級菜單</a></div>
</div>
</div>
<div class="li"><a href="#">公司簡介</a></div>
<div class="li"><a href="#">聯繫我們</a></div>
<div class="li"><a href="#">留言</a></div>
</div>
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".li").each(function () {
$(this).mouseover(function () {
$(this).children(".nav2").css("display", "block");
})
$(this).mouseleave(function () {
$(this).children(".nav2").css("display", "none");
})
}); });
</script>
<br/>
<br/>
<br/>
<div id="content">Hello World!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
</body>
</html>此方案經測試 支持ie6-9，FF，Chrome，以及各種山寨瀏覽器。
關鍵：
.nav2{
position: absolute;
display: none;
left:0;
top:19px;
}這樣就確定 .nav2 脫離的整體框架，從而浮動於上方，從而遮蓋住下面的#content。而.nav2的位置是由top和left控制的。
top bottom right left 定位的根據是上一個具有位置定義的父級元素，所以要給父級元素也就是 .nav .li 定義位置樣式 ，可以使用相對定位：
.nav .li
{
position:relative;
width:100px;
float:left;
}