CSS浮动与定位
<!doctype html>
<html><head><meta charset="utf-8">
<style type="text/css">
body{background:url(http://p1.so.qhmsg.com/bdr/1440__/t010351904f140a2796.jpg) no-repeat; background-position:center top /*31px 60px*/;}
.a01{width:200px;height:50px;background-color:pink;line-height:50px;text-align:center;font-size:20px}
.a02{width:200px;height:200px;background-color:#F0F0F0;line-height:50px;text-align:center;font-size:20px;display:none;}
.a01:hover .a02 {display:block;}
a{text-decoration:none;color:#000;}
a:hover{color:red;}
.box{width:200px;height:130px;border:5px solid;position:absolute;left:215px;top:8px;}
.box1{width:1200px;height:50px;position:absolute;top:160px;}
ul li{list-style:none;width:120px;height:50px;line-height:50px;text-align:center;background-color:#562; margin:0px 5px;float:left;top:0px;}
</style>
</head>
<body>
<div class=a01>下拉导航条
<div class=a02>
<a href="#" >下拉菜单一</a><br>
<a href="#" >下拉菜单一</a><br>
<a href="#" >下拉菜单一</a><br>
<a href="#" >下拉菜单一</a>
</div></div>
<div class=box></div>
<div class=box1>
<ul>
<li><a href="#">网站菜单01</a></li>
<li><a href="#">网站菜单01</a></li>
<li><a href="#">网站菜单01</a></li>
<li><a href="#">网站菜单01</a></li>
<li><a href="#">网站菜单01</a></li>
<li><a href="#">网站菜单01</a></li>
</ul></div>
</body>
</html>