js实现简洁大方的二级下拉菜单效果代码

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款简洁大方的二级下拉菜单，菜单的颜色自己根据需要重新定义吧，这里仅给大家提供一种制作二级菜单的思路，整体效果看上去相当实用，下拉导航菜单也是大家比较常用的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/

具体代码如下：

*{margin:0;padding:0;font-style:normal;font-family:宋体;}
body{text-align:center;font-size:14px;}
#content{margin:0 auto;width:600px;}
#content #nav{background:#006400;height:32px;margin-top:10px;}
#content #nav ul{list-style:none;}
#content #nav ul li{float:left;width:100px;line-height:32px;position:relative;}
#nav div{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#006400;float:left;height:0;overflow:hidden;}
#content #nav li .a{text-decoration:none;color:#00CD00;line-height:32px;display:block;border-right:1px solid #009800;}
#nav div a{text-decoration:none;color:#00CD00;line-height:26px;display:block;}
#nav div a:hover{background:#005400;}




 
  

   
菜单项1
    
     菜单测试1
     菜单测试1
     菜单测试1
    
   
   
菜单项2
    
     菜单测试2
     菜单测试2
     菜单测试2
    
   
   
菜单项3
    
     菜单测试3
     菜单测试3
     菜单测试3
     菜单测试3
     菜单测试3
    
   
   
菜单项4
    
     菜单测试4
     菜单测试4
     菜单测试4
    
   
   
菜单项5
    
     菜单测试5
     菜单测试5
     菜单测试5
     菜单测试5
    
   
   
菜单项6
    
     菜单测试6
     菜单测试6
     菜单测试6
    
   
  
 

希望本文所述对大家的javascript程序设计有所帮助。