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(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
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
