新手报到------自己写出的一些效果，记录自己的成长（导航的二级菜单显示）

#navbar{width:1140px;height:75px;margin:0 auto;}

#navbar ul{list-style:none;}

#navbar ul li{width:190px;height:70px;background:black;float:left;text-align:center;}

#navbar ul li.lan1{border-bottom:5px solid #f76f02}

#navbar ul li.lan3{border-bottom:5px solid #01c5ef;position:relative;}

#navbar ul li.lan5{border-bottom:5px solid #e30688}

#navbar ul li.lan2{border-bottom:5px solid #a8d102;height:57px;}

#navbar ul li.lan4{border-bottom:5px solid #bb92f9;height:57px;position:relative;}

#navbar ul li.lan6{border-bottom:5px solid #b9b8b8;height:57px;}

#navbar ul li a{font:bold 16px/57px "Arial";display:block;width:190px;height:70px;}

#navbar ul li.lan2 a{height:57px;}

#navbar ul li.lan4 a{height:57px;}

#navbar ul li.lan6 a{height:57px;}

#navbar ul li.lan1 a:link,#navbar ul li.lan1 a:visited{text-decoration:none;color:#f76f02;}

#navbar ul li.lan2 a:link,#navbar ul li.lan2 a:visited{text-decoration:none;color:#a8d102;}

#navbar ul li.lan3 a:link,#navbar ul li.lan3 a:visited{text-decoration:none;color:#01c5ef;}

#navbar ul li.lan4 a:link,#navbar ul li.lan4 a:visited{text-decoration:none;color:#bb92f9;}

#navbar ul li.lan5 a:link,#navbar ul li.lan5 a:visited{text-decoration:none;color:#e30688;}

#navbar ul li.lan6 a:link,#navbar ul li.lan6 a:visited{text-decoration:none;color:#b9b8b8;}

#navbar ul li.lan3 .lan3_erji{width:190px;height:200px;position:absolute;left:0px;top:70px;}

#navbar ul li.lan3 .lan3_erji ul{list-style: none}

#navbar ul li.lan3 .lan3_erji ul li{width:190px;height:40px;text-align: center;background: #01c5ef;}

#navbar ul li.lan3 .lan3_erji ul li a{font:normal 14px/40px "Arial";display:block;width:190px;height:40px;}

#navbar ul li.lan3 .lan3_erji ul li a:link,#navbar ul li.lan3 .lan3_erji ul li a:visited{text-decoration: none;color:white;}

#navbar ul li.lan3 .lan3_erji ul li a:hover{color:#d2f5fd;}

#navbar ul li.lan4 .lan4_erji{width:190px;height:80px;position:absolute;left:0px;top:57px;}

#navbar ul li.lan4 .lan4_erji ul{list-style: none}

#navbar ul li.lan4 .lan4_erji ul li{width:190px;height:40px;text-align: center;background: #bb92f9;}

#navbar ul li.lan4 .lan4_erji ul li a{font:normal 14px/40px "Arial";display:block;width:190px;height:40px;}

#navbar ul li.lan4 .lan4_erji ul li a:link,#navbar ul li.lan4 .lan4_erji ul li a:visited{text-decoration: none;color:white;}
#navbar ul li.lan4 .lan4_erji ul li a:hover{color:#eadcfe;}

<script type="text/javascript">

erji1=document.getElementById("erji1");
erji2=document.getElementById("erji2");
erjili=document.getElementById("erji").getElementsByTagName('li');
erji1.style.display="none";
erji2.style.display="none";
erjili[2].onmouseover=function(){erji1.style.display="block";}
erjili[8].onmouseover=function(){erji2.style.display="block";}
erjili[2].onmouseout=function(){erji1.style.display="none";}
erjili[8].onmouseout=function(){erji2.style.display="none";}

</script>

<div id="navbar">
<ul id="erji">
<li class="lan1"><a href="#">HOME</a></li>
<li class="lan2"><a href="#">DRESSES</a></li>
<li class="lan3">
<a href="#">TOPS</a>
<div class="lan3_erji" id="erji1">
<ul>
<li><a href="#">Knit Tops</a></li>
<li><a href="#">Blouses</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Coats</a></li>
<li><a href="#">Jackets</a></li>
</ul>
</div>
</li>
<li class="lan4">
<a href="#">BOTTOMS</a>
<div class="lan4_erji"  id="erji2">
<ul>
<li><a href="#">Pants</a></li>
<li><a href="#">Jumpsuits</a></li>
</ul>
</div>
</li>
<li class="lan5"><a href="#">ABOUT US</a></li>
<li class="lan6"><a href="#">CONTACT US</a></li>
</ul>
</div>