程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> jQuery三級下拉菜單

jQuery三級下拉菜單

編輯:關於JSP

https://www.aspphp.online/bianchen/UploadFiles_4619/201701/2017011810292089.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 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 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 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><

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved