JS下拉菜单一调用，连主菜单都hover后才显示了
===============html文件===================
<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>#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;}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}}();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>js</title> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#ul li").mouseover(function () { $(this).children("ul").css("display", "block"); }).mouseout(function () { $(this).children("ul").css("display", "none"); $(this).children("ul").mouseover(function () { $(this).css("display", "block"); }); $(this).children("ul").mouseout(function () { $(this).css("display", "none"); }); }) }); </script> <style type="text/css"> *{ margin:0px; padding:0px; } #ul{ width:600px; height:30px; } #ul li{ width:100px; height:28px; line-height:28px; background-color:#0099FF; border:1px solid blue; margin:0px 2px 0px 2px; float:left; list-style-type:none; position:relative;} #ul li ul{ width:100px; position:absolute; top:30px; left:-3px; display:none;} #ul li ul li{ width:98px; height:26px; line-height:26px; border:1px solid gray; background-color:#0099CC; } </style></head><body> <ul id="ul"> <li>123</li> <li>123 <ul> <li>000</li> <li>000</li> <li>000</li> <li>000</li> </ul> </li> <li>123</li> <li>123 <ul> <li>000</li> <li>000</li> <li>000</li> <li>000</li> </ul> </li> </ul></body></html>