常用的JS+CSS弹出二级导航菜单特效

<!DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>常用的JS+CSS弹出二级导航菜单特效丨芯晴网页特效丨CsrCode.Cn</title>
<meta name= " keywords " content= " 网页特效,网页特效代码,js特效,js特效代码,广告代码 " />
<meta name= " description " content= " 网页特效代码大全! " />
<script type= " text/javascript ">
function MM_findObj(n, d) {  // v4.0
   var p,i,x;   if(!d) d=document;  if((p=n.indexOf( " ? "))> 0&&parent.frames.length) {
    d=parent.frames[n.substring(p+ 1)].document; n=n.substring( 0,p);}
   if(!(x=d[n])&&d.all) x=d.all[n];  for (i= 0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
   for(i= 0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
   if(!x && document.getElementById) x=document.getElementById(n);  return x;
}
function show_csrcode() {  // v3.0
   var i,p,v,obj,args=show_csrcode.arguments;
   for (i= 0; i<(args.length- 2); i+= 3if ((obj=MM_findObj(args[i]))!= null) { v=args[i+ 2];
     if (obj.style) { obj=obj.style; v=(v== ' show ')? ' visible ':(v= ' hide ')? ' hidden ':v; }
    obj.visibility=v; }
}
</script>
<style type= " text/css ">
BODY{ margin: 0px; background-color: #FFFFFF; font-size: 12px; color: # 333333; font-family: 宋体, Arial;} /* 网站背景底色 */
a.top:link, a.top:active, a.top:visited
{ display:block;   float:left; height:33px; padding:13px 9px 0px 9px; font-weight: bold; font-size: 14px; color:#ffffff; } /* 菜单栏字体的大小及颜色 */
a.top:hover{ font-size: 14x;    text-decoration: none; background:url( ' http://www.csrcode.cn/imagesforcode/201207/20120604_3.jpg ') no-repeat center 0px; } /* 鼠标指向时菜单栏字体的大小 */
#link_zzjs_net span{ display:block;   float:left;}
.top1{padding-left:20px; width:960px; text-align:center; height:46px; LINE-height:27px; background-image: url( ' http://www.csrcode.cn/imagesforcode/201207/20120604_2.jpg ');}
a.tops:link, a.tops:active, a.tops:visited
{ display:block; padding:3px 1px 3px 3px; margin:0px; line-height:1em;  } /* 菜单栏字体的大小及颜色 */
a.tops:hover{background-color: #3399cc; color:#fff; text-decoration: none; } /* 鼠标指向时菜单栏字体的大小 */
.txl{margin-top:-10px;margin-left:-100px; width:270px; padding-top:10px; Z-INDEX:  1; VISIBILITY: hidden; POSITION: absolute;text-align:left;}
.txl1{border: 2px solid #0099CC; background-color:#FFEAB3; padding:0px 0px 0px 0px;width:270px;}
.txl2{ float:left;color:#CC3300; width:20px; font-size:14px; font-weight:bold; text-align:center; padding:5px 5px 5px 5px;line-height: 1.3em;}
.txl3{ float:left;width:240px; background-color:#FFFEEC;height:110px; padding-top:5px;}
.txl4{height:20px;overflow:hidden; padding:0px 0px; width:80px; float:left;}
</style>
</head>
<body>
<div align= " center " >
<div  class= " top1 ">
 <div id= " link_zzjs_net ">
  <a href= " #nogo "  class= " top ">首页</a><span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg "></span>
  <a onMouseOver= " show_csrcode('Layer_2', '', 'show'); " onMouseOut= " show_csrcode('Layer_2', '', 'hide'); "  class= " top " href= " #nogo ">净水机</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_2 οnmοuseοver= " show_csrcode('Layer_2','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_2','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">净水机</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">爱惠浦净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">百诺肯净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">立升净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">美的净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">银之源净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">水丽净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">安吉尔净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">沁园净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">康丽根净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">怡口净水器</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">霍尼韦尔净水</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">3M净水器</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_8', '', 'show'); " onMouseOut= " show_csrcode('Layer_8', '', 'hide'); "  class= " top " href= " #nogo ">纯水机</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_8 οnmοuseοver= " show_csrcode('Layer_8','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_8','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">纯水机</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">康富乐纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">美的纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">莫林纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">怡口纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">滨特尔纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">亚都纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">银之源纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">安吉尔纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">沁园纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">世韩纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">凯弗隆纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">康丽根纯水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">爱浦丽纯水机</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_7', '', 'show'); " onMouseOut= " show_csrcode('Layer_7', '', 'hide'); "  class= " top " href= " #nogo ">软水机</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_7 οnmοuseοver= " show_csrcode('Layer_7','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_7','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">软水机</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">怡口软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">滨特尔软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">恩美特软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">可尔露软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">美的软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">水丽软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">沁园软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">霍尼韦尔软水</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">莫顿软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">史密斯软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">康丽根软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">爱浦丽软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">3m软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">GE软水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">汉斯希尔软水</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_1', '', 'show'); " onMouseOut= " show_csrcode('Layer_1', '', 'hide'); "  class= " top " href= " #nogo ">前置过滤器</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_1 οnmοuseοver= " show_csrcode('Layer_1','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_1','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">前置过滤器</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">汉斯希尔前置</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">霍尼韦尔前置</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">水丽前置过滤</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">怡口前置过滤</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">浚渡前置过滤</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_14', '', 'show'); " onMouseOut= " show_csrcode('Layer_14', '', 'hide'); "  class= " top " href= " #nogo ">中央净水机</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_14 οnmοuseοver= " show_csrcode('Layer_14','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_14','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">中央净水机</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">怡口中央净水</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">滨特尔净水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">奔泰中央净水</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">恩美特净水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">百诺肯中央净水机</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">3M中央净水机</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_5', '', 'show'); " onMouseOut= " show_csrcode('Layer_5', '', 'hide'); "  class= " top " href= " #nogo ">磁性软化器</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_5 οnmοuseοver= " show_csrcode('Layer_5','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_5','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">磁性软化器</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">水丽纳米通</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">美国格玛斯</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">美国水伴侣</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">英国水兔子</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a onMouseOver= " show_csrcode('Layer_12', '', 'show'); " onMouseOut= " show_csrcode('Layer_12', '', 'hide'); "  class= " top " href= " #nogo ">滤芯/耗材</a>
  <span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg ">
   <DIV id=Layer_12 οnmοuseοver= " show_csrcode('Layer_12','','show') "  class= " txl " οnmοuseοut= " show_csrcode('Layer_12','','hide') ">
    <div  class= " txl1 ">
     <div  class= " txl2 ">滤芯耗材</div>
     <div  class= " txl3 ">
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">软水机盐</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">TDS检测笔</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">前置滤瓶 </a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">滤芯耗材</a></div>
     <div  class= " txl4 "><a href= " #nogo "  class= " tops ">爱惠浦滤芯</a></div>
     <div style= " clear:both; "></div>
     </div><div style= " clear:both; "></div>
    </div>
   </DIV>
  </span>
  <a href= " #nogo "  class= " top al ">成功案例</a>
  <a href= " #nogo "  class= " top ">净水视频</a><span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg "></span>
  <a href= " #nogo "  class= " top ">净水课堂</a><span><img src= " http://www.csrcode.cn/imagesforcode/201207/20120604_1.jpg "></span>
 <a href= " #nogo "  class= " top ">购物帮助</a></div>
</div>
</div>
</body>
</html>

<br><br><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652842.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值