js实现的黑背景灰色二级导航菜单效果代码

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微软雅黑字体，若不想用这种字体，可换成默认的宋体即可。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/

具体代码如下：

BODY { background:#26272b;}
a{ color:#FFFFFF}
UL {LIST-STYLE-TYPE: none;padding:0px;margin:0px;}
LI {FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微软雅黑", Arial, Verdana;}
.hide {DISPLAY: none}
#mainmenu_top{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
#mainmenu_top UL{}
#mainmenu_top UL LI {FLOAT: left;}
#mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
#mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
#mainmenu_bottom UL LI A:hover {text-decoration: underline;}





 
 
 

 
网站首页 
 
JS代码 
 
电子商务 
 
脚本下载 
 
建站技巧 
 
CSS技巧 
 
CSS导航菜单 
 
网络营销 
 
SEO优化 
 
 

 
 

 
2012年元旦网站推广惊喜促销价 
 
网站公告：考高分网7年了 
 
 

 
考高分网 
 
考高分网 
 
考高分网 
 
考高分网 
 
考高分网 
 
网页特效 
 

 
考高分网 
 
考高分网 
 
网络营销 
 
网络营销 
 
网络营销 
 
网络营销 
 
网络营销 
 
网页特效 
 

 
考高分网 
 
网页特效 
 
网络营销 
 
网络营销 
 

 
考高分网 
 
服务器租用首页 
 
网络营销 
 
网络营销 
 
超级机房 
 
考高分网 
 

 
考高分网 
 
脚本下载 
 
考高分网 
 
考高分网 
 

 
考高分网 
 
考高分网 
 
考高分网 
 
个人建站 
 
门户建站 
 

 
考高分网 
 
网络营销 
 
网络营销 
 

 
考高分网 
 
网络营销 
 
网页特效 
 
网络营销 
 
网络营销 

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