为什么我的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>

相关了解……