这是由两个div来实现的，首先建立一个外层div并设置宽高，要使宽度随屏幕宽度变化(即浏览器宽度变化)，那么宽度就得设置100%，高度设置为你需要的高度即可，具体属性为 width:100%height:你自己的高度background:你需要的颜色这样就让该div随屏幕(浏览器)宽度变化而变化了。然后在这个div里面再嵌套一个div给定一个宽高属性，就是你导航的宽高，要使之居中，各人使用的方法也有所不同，但是常用的还是margin属性，具体属性如下 width:你导航的宽度height:你导航的高度margin:0 auto 这样就实现了，如果背景是图片的话就更改background属性即可，还有不明白的随时Hi我。两个DIV用的一个样式规则，自然是在一行里了 你可以为第二个DIV专门设置一个附加的规则，比如 .newline{ clear:both} 然后第二个div改成 <div class="top newline">或者直接把第二个DIV改成 <div class="top" style="clear:both">div+css中下拉菜单在下拉下来时被另一层覆盖，这个是因为通过Js给这个层添加了一个display:none，当鼠标点到指定的那个层的时候，这个css就会执行，因而这个层就会被隐藏掉，具体我们通过代码来理解：
<html>
<head>
<style>
#div1{
width:600px
height:200px
font-size:13px
}
#div1 #img{
width:600px
height:200px
}
#div1 #wenzi{
width:600px
height:200px
}
</head>
<script>
window.onload = function(){
var oImg = document.getElementById('img')
var oWen = document.getElementById('wenzi')
oImg.onclick = function(){
oWen.style.display = "none"
}
}
</script>
<body>
<div id='div1'>
<div id='img'>
<p>测试文字1</p>
</div>
<div id='wenzi'>
<p>测试文字2</p>
</div>
</div>
</body>
</html>
