Question

为什么我的html导航下拉菜单会被下面的网页内容挡住？

<style type="text/css">
*{margin:0; padding: 0;}

body{ background:#999900;}
#navcont { background:#999900; width:100%;}

#nav { font-family: helvetica; position:relative; width:900px; height:40px; font-size:16px; color:#999900; margin: 0 auto; z-index:100}

#nav ul { list-style-type:circle;}

#nav ul li { float:left; position:relative;}

#nav ul li a { border-right:0px solid #cccccc; padding:20px; display:block; text-decoration:none; text-align:center; color:#fff99;}

#nav ul li a:hover { background:#999900 repeat-x; color:#0000FF;}

#nav ul li ul {display: none;}

#nav ul li:hover ul {display: block; position:absolute; top:56px; min-width:190px; left:0;}

/*border-bottom属性把下边框的所有属性设置到一个声明中--solid实线--*/
#nav ul li:hover ul li a {display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #cccccc; border-right: none;}
#nav ul li:hover ul li a:hover { background:#333333; color:#ffff;}
.borderleft {border-left: 0px solid #e9e9e9;}
.top { border-top: 1px solid #f2f2f2;}
#threestyles {
width:300px;
margin: 0px auto;
border: 2px solid #66699;
margin-top:20px;
padding:100px 100px 100px 100px;}
</style>

Answer 1

因为没有设置z-index属性，用法：z-index:9999;，数字越大，表示越在上面

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）

Answer 2

那就给二级菜单的标签加上css样式：z-index:8000值写的大一点，然后就可以了

Answer 3

木有看到html结构。
估计问题是
#nav ul li:hover ul {display: block; position:absolute; top:56px; min-width:190px; left:0;}

没有给层级 z-index=N

Answer 4

给你的下拉菜单所在的容器 添加一句样式 z-index:1000;即可

Answer 5

z-index：500；