JS下拉菜单一调用,连主菜单都hover后才显示了,该如何处理
JS下拉菜单一调用,连主菜单都hover后才显示了
===============html文件===================
=================css文件===============================
===========================js文件====================
===============html文件===================
- HTML code
<div id="menubg"> <div id="menu"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">公司简介</a> <ul> <li><a href="#">走进长顺</a></li> <li><a href="#">企业理念</a></li> <li><a href="#">企业荣誉</a></li> </ul> </li> <li><a href="#">企业动态</a></li> <li><a href="#">产业产品</a> <ul> <li><a href="#">肉鸡</a></li> <li><a href="#">冷冻产品</a></li> <li><a href="#">肉品加工厂</a></li> </ul> </li> <li><a href="#">行业知识</a></li> <li><a href="#">养殖现场</a></li> <li><a href="#">服务中心</a> <ul> <li><a href="#">合作社</a></li> <li><a href="#">农户</a></li> </ul> </li> <li><a href="#">留言反馈</a></li> <li><a href="#">联系长顺</a></li> </ul> </div> </div> <script type="text/javascript"> var menu=new menu.dd("menu"); menu.init("menu","menuhover"); </script>
=================css文件===============================
- CSS code
#menubg { width: 100%; height: 36px; background: url(menubg.gif) repeat-x; CLEAR: both; } #menu { width: 983px; height: 36px; } #menu ul { line-height: 33px; font-size: 14px; } #menu ul li { POSITION: relative; float: left; text-align: center; width: 94px; background: url(menuline.gif) no-repeat; height: 36px; padding-left: 2px; } #menu ul li a { display: block; width: 90px; text-decoration: none; color: #fff; } #menu ul li a:hover { text-decoration: none; color: #fff; background: url(mhover.gif) no-repeat; } #menu UL LI UL { POSITION: absolute; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; DISPLAY: none; HEIGHT: auto; TOP: 36px; PADDING-TOP: 0px; LEFT: 0px; opacity: 1; } #menu UL LI UL LI { TEXT-ALIGN: center; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: auto; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; } #menu UL LI UL LI A { FILTER: alpha(opacity=60); ZOOM: 1; DISPLAY: block; BACKGROUND: #069; COLOR: #fff; opacity: 0.6; -moz-opacity: 0.6; } #menu UL LI UL LI A:hover { FILTER: alpha(opacity=70); BACKGROUND: #006600; COLOR: #fff; opacity: 0.7; -moz-opacity: 0.7; }
===========================js文件====================
- JScript code
var menu=function(){ var t=15,z=50,s=10,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();