本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：
这是一款CSS配合Javascript实现二级下拉导航菜单，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了JS，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
具体代码如下：
CSS二级下拉导航菜单 body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';} #mainNavBar{width:100%;background:#999;padding:10px 0;} #nav{width:760px;height:30px;margin:0 auto;} #nav ul{padding:0;margin:0;} #nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;} #nav ul li a{display:block;color:#fff;text-decoration:none;} #nav ul li a:hover{font-weight:bold;background:#666;} #subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;} #subNav a{text-decoration:none;font-weight:normal;display:block;} #subNav a:hover{color:#f00;background:#f00;}
- 添加 日志 分类
- 管理 分类 文章
- 扩展 评论管理 留言管理 注销退出
希望本文所述对大家的Javascript程序设计有所帮助。
