jQuery三级下拉菜单

演示地址:http://www.corange.cn/demo/3738/index.html

http://www.corange.cn//uploadfiles/1202_52879.jpg

<!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('div').stop(true,true).slideDown('slow');
},function(){
$(this).children('div').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 οnlοad="MM_preloadImages('image/nav1_1.gif')">
<ul id="webmenu" class="first-menu">


<li><a href="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="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="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="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="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="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></li>
<li><a href="">劲舞团</a></li>

</ul>
</li>
<li><a href="/">17173</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="">百度-MP3</a></li>

</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
原文地址:http://www.corange.cn/archives/2010/12/3738.html

转载于:https://www.cnblogs.com/zerogo/archive/2010/12/03/1895292.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/263723.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！