基于dropdown.js实现的两款美观大气的二级导航菜单

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单。分享给大家供大家参考。具体如下：

1. 蓝色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/

具体代码如下：

body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
a{text-decoration: none;color:#003971;}
a:hover{color:#000;}

#navMenu {width:960px;margin:20px auto;height: 44px;line-height: 44px;display:block;overflow:hidden;background: url(images/_nav_bg.jpg) repeat-x ;}
#navMenu ul{width:95%;padding-left:8px;background:url(images/_nav_l.jpg) no-repeat;float:left;}
#navMenu .onelink{background-image:none;}
#navMenu_r{padding-right:8px;background:url(images/_nav_r.jpg) no-repeat right ;float:right;height:44px;}
#navMenu li {width:108px;text-align:center;float: left;line-height:44px;height: 44px;background-image: url(images/_nav_fg.jpg);  background-repeat: no-repeat;background-position: 0 center;  margin-left: -2px;}
#navMenu li a {  color:#fff;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover{background: url(images/_nav_hover.jpg) no-repeat center;  text-decoration: none;color:#FFf;}

.dropMenu {  position:absolute;top: 0;z-index:100;width: 164px;visibility: hidden; margin-top: -2px;margin-left:-2px;}
.dropMenu li.end { background:url(images/_sub_bottom.jpg) no-repeat;padding-left:6px;height:12px;}
.dropMenu li {background:url(images/_sub_bg.jpg);padding:8px 0 0 6px;  }
.dropMenu li a {width: 92%;  display: block;  text-align:center;  color: black;padding: 5px 0 5px 0px;color:#000;  }
.dropMenu a:hover {text-decoration: underline;color:#003971;}






js+css横向二级导航条--蓝色





 
主页
 
HTML+CSS
 
JS代码
 
电子商务
 
SEO优化
 
建站技巧
 
零度对策
 
网络营销
 
  



 
导航菜单
 
焦点幻灯片
 
网页特效
 
广告代码
  



 
企业类网站
 
行业类网站
 
BLOG类网站
 
门户类网站
 
商城类网站
  



 
HTML技巧
 
CSS技巧
 
CMS建站技巧
 
其他技巧
  


 

2. 桔黄色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-dropdown-orange-style-nav-menu-codes/

具体代码如下：

body{padding:0px;margin:0px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#2f2f2f;}
ul,li{padding:0px;margin:0px;list-style-type: none;}
a{text-decoration: none;color:#CFE0EE;}
a:hover{color:#Fff;}
#navMenu {width:960px;margin:20px auto;height: 44px;line-height: 44px;display:block;overflow:hidden;background: url(images/nav_bg.jpg) repeat-x ;}
#navMenu ul{width:95%;padding-left:8px;background:url(images/nav_l.jpg) no-repeat;float:left;}
#navMenu .onelink{background-image:none;}
#navMenu_r{padding-right:8px;background:url(images/nav_r.jpg) no-repeat right ;float:right;height:44px;}
#navMenu li {width:108px;text-align:center;float: left;line-height:44px;height: 44px;background-image: url(images/nav_fg.jpg);  background-repeat: no-repeat;background-position: 0 center;  margin-left: -2px;}
#navMenu li a {color:#fff;font-family: "宋体";padding-right: 1em;padding-left: 1em;margin-left: 2px;display: block;}
#navMenu li a:hover{background: url(images/nav_hover.jpg) no-repeat center;
text-decoration: none;color:#FFf;}

.dropMenu {  position:absolute;top: 0;z-index:100;width: 164px;visibility: hidden; margin-top: -4px;margin-left:-2px;}
.dropMenu li.end { background:url(images/sub_bottom.jpg) no-repeat;padding-left:6px;height:12px;}
.dropMenu li {background:url(images/sub_bg.jpg);padding:8px 0 0 6px;  }
.dropMenu li a {
width: 92%;  display: block;
text-align:center;
color: black;padding: 5px 0 5px 0px;color:#000;
}
.dropMenu a:hover {text-decoration: underline;color:#fa6e00;}






js+css横向二级导航条--桔黄色





 
主页
 
HTML+CSS
 
JS代码
 
电子商务
 
SEO优化
 
建站技巧
 
零度对策
 
网络营销
 
  



 
导航菜单
 
焦点幻灯片
 
网页特效
 
广告代码
  



 
企业类网站
 
行业类网站
 
BLOG类网站
 
门户类网站
 
商城类网站
  



 
HTML技巧
 
CSS技巧
 
CMS建站技巧
 
其他技巧
  


 

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