JS+CSS实现电子商务网站导航模板效果代码

本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码。分享给大家供大家参考。具体如下：

这是一款JS+CSS实现的电子商务网站导航模板，二级导航菜单，超强美化，超强实用性，分享给大家。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/

具体代码如下：

BODY {
}
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 UL LI .menuhover {
 BACKGROUND: url(images/mainmenu_s.gif) no-repeat; 
 COLOR: #fff;
}
#mainmenu_body
{
 margin-top:100px;
}
#mainmenu_top UL LI A {
 MARGIN-TOP: 2px;
 CURSOR: pointer;
 PADDING-TOP: 8px;
 HEIGHT: 20px;
 text-decoration: none;
}
#mainmenu_top { 
 width:100%;
 HEIGHT: 28px; 
 display:block;
 overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
  WIDTH: 81px;
 height:auto;
 DISPLAY: block;
 COLOR: #666666; 
 TEXT-ALIGN: center; 
 FONT-WEIGHT: bold; 
 BACKGROUND: url(images/mainmenu_h.gif) no-repeat; 
}
#mainmenu_bottom {
 width:100%;
 height:32px;
 line-height:32px;
 display:block;
 overflow:hidden;
 BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
 HEIGHT: 32px;
 COLOR: #fff;
 MARGIN-LEFT: 0px; 
 PADDING: 0px 0px 0px 5px;
 BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%; 
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
 PADDING-LEFT: 8px; 
 FLOAT: left; 
 MARGIN-LEFT: 7px; 
 HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
 FLOAT: left; 
 MARGIN-LEFT: 7px; 
 HEIGHT: 32px;
 PADDING-LEFT: 8px; 
 BACKGROUND: url(images/menulink_bg_l.gif) no-repeat; 
}
#mainmenu_bottom UL LI A {
 COLOR: #fff; 
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px; 
 DISPLAY: block;
 text-decoration: none;
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%; 
}
#mainmenu_bottom UL LI A:hover {
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
 color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
 COLOR: #fff; 
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px; 
 DISPLAY: block; 
 BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%; 
}

 

 

  
 
 
 
网站首页 
 
 
CCS导航 
 
 
源码下载 
 
 
CSS模板 
 
 
后台模板 
 
 
CSS技巧 
 
 
CSS菜单 
 
 
HTML+CSS模板 
 
 
SEO优化 
  

  
 
  
 
  
本导航非常适合于分类比较多电子商务站等网站的导航模板版 
 
  
此导航很漂亮 
 
  
 
  
 
  
免费模板网 
 
  
免费模板网 
 
  
HTML+CSS模板 
 
  
HTML+CSS模板 
 
  
HTML+CSS教程 
 
  
网页特效 
 
  
 
  
免费模板网 
 
  
免费模板网 
 
  
网上商城 
 
  
网上商城 
 
  
MYSQL数据库 
 
  
MYSQL数据库 
 
  
电子商务 
 
  
网页特效 
 
  
 
  
免费模板网首页 
 
  
网页特效 
 
  
MYSQL数据库 
 
  
MSSQL数据库 
 
  
 
  
服务器租用首页 
 
  
服务器租用首页 
 
  
服务器租用 
 
  
服务器托管 
 
  
超级机房 
 
  
CDN加速设施 
 
  
 
  
企业邮局首页 
 
  
企业邮局首页 
 
  
绿色G级邮箱 
 
  
绿色企业邮箱 
 
  
 
  
网站制作首页 
 
  
企业建站 
 
  
商城制作 
 
  
个人建站 
 
  
门户建站 
 
  
 
  
代理加盟 
 
  
代理加盟 
 
  
代理加盟 
 
  
 
  
代理加盟 
 
  
联系我们 
 
  
本站通知 
 
  
行业新闻 
 
  
诚聘英才 
 

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