<!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;
}