欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery三级下拉菜单

程序员文章站 2022-12-01 18:07:33
jQuery三级下拉菜单


<!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>jQure三级下拉菜单</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
</script>
<script type=text/javascript>
$(function(){
$(#webmenu li).hover(function(){
$(this).children(ul).stop(true,true).slideDown(slow);
},function(){
$(this).children(ul).stop(true,true).slideUp(slow);
});

$(#webmenu li).hover(function(){
$(this).children(p).stop(true,true).slideDown(slow);
},function(){
$(this).children(p).stop(true,true).slideUp(slow);
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:"宋体";
font-size:12px;
text-align:left;
}
img{ border:0px;}
a {
color:#333;
text-decoration:none;
}
ul {
list-style:none;
}
#webmenu { height:24px; text-align:center;}
#webmenu li ul {display:none; border:1px solid #ddd;}
#webmenu li ul li { float:none;}
*html #webmenu li ul li {display:inline;}
#webmenu li ul a {float:none; height:24px; line-height:24px; padding:0 10px; text-transform:capitalize;}
#webmenu .height-auto { line-height:15px; padding:5px 10px;}
.second-menu, .third-menu, .fourth-menu {position:absolute;}
.first-menu li {float:left; position:relative;}
.first-menu a { float:left; display:block; height:24px; line-height:24px; background:#e7e7e7; padding: 0;}
.first-menu a:hover {background:#ccc;}
.second-menu {top:24px; right:0;}
.second-menu a.arrow {background:#e7e7e7 url(image/li_bd.gif) no-repeat 160px 10px; border-bottom:1px solid #fff;}
.second-menu a.arrow:hover {background:#ccc url(image/nav_bd2.gif) no-repeat 160px 10px; color:#990000}
.second-menu a.arrow-02 {background:#e7e7e7 url(image/li_bd.gif) no-repeat 160px 10px; border-bottom:1px solid #fff;}
.second-menu a.arrow-02:hover {background:#ccc url(image/nav_bd2.gif) no-repeat 160px 10px; color:#990000}
.third-menu, .fourth-menu {width:177px; top:0; left:177px; _left:88px;}
.third-menu a {background:#e7e7e7; border-bottom:1px solid #fff;}
.third-menu a:hover {background:#ccc; border-bottom:1px solid #fff; color:#990000}
#subMgm {width:177px;}
#subMgm .third-menu {left:177px; _left:88px;}
#subMgm .fourth-menu {left:177px; _left:88px;}
#subMusic, #subNews {width:177px;}
</style>
</head>
<body onload="MM_preloadImages(image/nav1_1.gif)">
<ul id="webmenu" class="first-menu">
<!--走进新天-->
<!--品牌产品-->
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(Image2,,image/nav1_2.gif,2)"><img src="image/nav_2.gif" alt="品牌产品" name="Image2" width="97" height="24" border="0" id="Image2" /></a>
<ul style="display: none;" id="subMusic" class="second-menu">
<li><a href="#" class="arrow" target="_self">产品展示</a></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(Image3,,image/nav1_3.gif,3)"><img src="image/nav_3.gif" alt="科技研发" name="Image3" width="97" height="24" border="0" id="Image3" /></a>
<ul id="subNews" class="second-menu">
<li><a href="#" class="arrow" target="_self">www.corange.cn</a>
<ul class="third-menu">
<li><a href="">百度</a></li>
<li><a href="">Google</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">新闻</a>
<ul class="third-menu">
<li><a href="">新浪</a></li>
<li><a href="">腾讯</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">招聘</a>
<ul class="third-menu">
<li><a href="">中华英才网</a></li>
<li><a href="">前程无忧</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">网赚</a>
<ul class="third-menu">
<li><a href="">威客中国</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">购物</a>
<ul class="third-menu">
<li><a href="#" class="arrow" target="_self">网站</a>
<ul class="fourth-menu">
<li><a href="">淘宝网</a></li>
<li><a href="">当当网</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">快递公司</a>
<ul class="fourth-menu">
<li><a href="">申通快递</a></li>
<li><a href="">韵达快运</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">电子支付</a>
<ul class="fourth-menu">
<li><a href="">支付宝</a></li>
<li><a href="">快钱</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">科技</a>
<ul class="third-menu">
<li><a href="">专利之家</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(Image4,,image/nav1_4.gif,4)"><img src="image/nav_4.gif" alt="服务中心" name="Image4" width="97" height="24" border="0" id="Image4" /></a>
<ul style="display: none;" id="subMgm" class="second-menu">
<li><a href="#" class="arrow" target="_self">游戏</a>
<ul class="third-menu">
<li><a href="#" class="arrow" target="_self">网络游戏</a>
<ul class="fourth-menu">
<li><a href="/">魔兽世界</a><