当前位置：首页 → 问答吧 → 请教关于下拉菜单的问题

请教关于下拉菜单的问题

时间：2010-05-31

来源：互联网

有个下拉菜单，在IE8和FIREFOX下是正常的，但是在IE7，如果光标从一个菜单选项（例如：我们的课程等）上移开时，对应的子菜单不会关闭，想请教一下怎么解决，谢谢。

样例如下：
请点击这儿打开样例

作者: eastgreat 发布时间: 2010-05-31

ietester 下ie7 没看到问题啊？

作者: loethen 发布时间: 2010-05-31

<!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>The Little Gym | Family Fun Activities | Child Gymnastics</title> <base href="http://www.f1salon.com/2009/tlg/html/" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/font.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* CSS Document */ ul {margin:0; padding:0;} li { list-style:none;} #nav { background:#666 url(images/consumer/mainnav_onbg.gif) no-repeat 0 0; padding-left:10px; margin-right:14px; overflow:hidden; } #nav li {float: left; width:167px; background:#4D90CD;} #nav li a {display: block;font:14px Arial; color:#FFF; font-weight:bold; height:44px; line-height:44px; text-decoration:none; text-align:center;} #nav li a:hover{background:#F79C85;} #nav li ul { display:none; width:167px; position: absolute; border-bottom:#CBD1E0 1px solid; } #nav li ul a{ display:block; height:25px; text-align:left; text-indent:1em; line-height:25px; font-weight:normal; font-size:12px; border-top:1px solid #CBD1E0; border-left:1px solid #CBD1E0; border-right:1px solid #CBD1E0; background: #4D90CD; } #nav li.no ul {display:block;} div#mainnav{ width:859px; clear:both; margin:0 auto; padding:0; background:url(images/consumer/mainnav_bg.gif) no-repeat right top; } </style> <script language="javascript"> <![CDATA[//><!]]> </script> </head> <body> <div id="wrapper"> <div id="container"> <div id="header">  <div id="topnav"> <div class="topnavcorner"> <p><a href="http://www.thelittlegym.cn/franchise" target="_blank" class="font_12blue">加盟机会</a><span class="topnavspace"> | </span><a href="refer-a-friend.html" class="font_12blue">向朋友推荐The Little Gym</a><span class="topnavspace"> | </span><a href="Follow-Us.html" class="font_12blue">关注我们</a><span class="topnavspace"> | </span><a href="http://www.thelittlegym.com" target="_blank" class="font_12blue">全球总站</a></p> </div> </div>   <div id="logo"><a href="index.html"><img src="images/logo_tlg.gif" border="0" /></a> </div>   <div id="mainnav"> <ul id="nav"> <li style="background:#F79C85"><a href="index.html">首页</a></li> <li><a href="our-story.html">The Little Gym的故事</a> <ul> <a href="philosophy.html" >我们的哲学</a> <a href="program-benefits.html" >课程作用</a> <a href="history.html" >历史</a> <a href="little-gym-locations.html" >我们的中心</a> </ul> </li> <li><a href="childrens-programs.html">我们的课程</a> <ul> <a href="parent-child.html" >亲子课</a> <a href="kids-gymnastics.html" >学前体操课</a> <a href="youth-gymnastics.html" >学龄体操课</a> <a href="kids-karate.html" >空手道课</a> <a href="sports-skills.html" >球类运动技能发展课</a> <a href="dance.html" >舞蹈</a> </ul> </li> <li><a href="childrens-activities.html">我们的活动</a> <ul> <a href="kids-birthday.html" >生日聚会</a> <a href="kids-camps.html" >夏令营和冬令营</a> <a href="parents-night.html" >爸爸妈妈的自由夜</a> </ul> </li> <li><a href="contact-us.html">联系我们</a> <ul> <a href="Follow-Us.html" >关注我们</a> <a href="careers.html" >加入The Little Gym</a> </ul> </li> </ul> </div> </div>  <SCRIPT type=text/javascript src="js/swfobject.js"></SCRIPT> <div id="maincontent"> <div id="leftbar"> <div id="flash"> <OBJECT id=mymovie classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=581 height=348><PARAM NAME="_cx" VALUE="15372"><PARAM NAME="_cy" VALUE="9207"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="swf/consumer/TLG_Con_Home.swf"><PARAM NAME="Src" VALUE="swf/consumer/TLG_Con_Home.swf"><PARAM NAME="WMode" VALUE="Opaque"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="FFFFFF"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT> </div> <SCRIPT type=text/javascript> var homeswf = new SWFObject("swf/consumer/TLG_Con_Home.swf", "mymovie", "581", "348", "8", "#ffffff"); homeswf.addParam("wmode", "opaque"); homeswf.addVariable("flvpath", "flv/TLG_con_home.flv"); homeswf.addVariable("section1path", "swf/consumer/sectionA_locations.swf"); homeswf.addVariable("section2path", "swf/consumer/sectionB.swf"); homeswf.addVariable("section3path", "swf/consumer/sectionC.swf"); homeswf.write("flash"); </SCRIPT> <div id="copy"> <p><strong>在The Little Gym，孩子们展翅高飞</strong></p> <p>您在为您的孩子未来的成功寻找和提供最好的开端。The Little Gym将在这不平凡的和快乐的旅程中陪伴您和帮助您。通过30多年的研究和实践，The Little gym在全世界21个国家和地区拥有超过300个中心。所有这些中心都在帮助孩子们取得一生的成功。(<a href="our-story.html">更多</a>)</p> </div> </div> <div id="sidebar"> <div class="purplecallout"> <div class="purpletop"> <div class="purplebottom"> <div id="findagym"> <h3>查找Gym 中心<img src="images/global/search_icon.gif" width="36" height="31" align="absmiddle" /></h3> <p><a href="little-gym-locations.html"><img src="images/global/btn_go_purple.gif" width="114" height="31" border="0" /></a></p> <p>或<br /> <a href="little-gym-locations.html">通过地区查找我们的中心</a></p> <p></p> </div> </div> </div> </div> <div class="orangecallout"> <div class="orangetop"> <div class="orangebottom"> <div id="freeclass"> <h3>介绍课</h3> <p>亲身体验<br /> 我们的课程吧！</p> <p><a href="TrialClass.html"><img src="images/global/btn_signupnow.gif" border="0" /></a></p> <p></p> </div> </div> </div> </div> <div class="greencallout"> <div class="greentop"> <div class="greentbottom"> <div id="callout"> <h3>加入The Little Gym<br /> 大家庭</h3> <p>创造一个成功的事业，<br /> 让孩子的未来不同凡响。</p> <p><a href="http://www.thelittlegymfranchise.com.cn" target="_blank"><img src="images/global/btn_franchise.gif" width="104" height="31" border="0" /></a></p> <p>努力地工作，尽情地玩，<br /> 改变孩子的生活。</p> <p><a href="careers.html"><img src="images/global/btn_careers.gif" width="104" height="31" border="0" /></a></p> </div> </div> </div> </div> </div> <div style="clear:both;"></div>  <div id="insidefooter"><a href="index.html" class="font_12white">首页</a> | <a href="childrens-programs.html" class="font_12white">我们的课程</a> | <a href="childrens-activities.html" class="font_12white">我们的活动</a> | <a href="careers.html" class="font_12white">工作机会</a> | <a href="contact-us.html" class="font_12white">联系我们</a> | <a href="little-gym-locations.html" class="font_12white">我们的中心</a> | <a href="sitemap.html" class="font_12white">站点地图</a> | <a href="privacy-policy.html" class="font_12white">隐私政策</a> | <a href="terms-of-use.html" class="font_12white">使用条款</a> | <a href="http://www.thelittlegym.cn/franchise" target="_blank" class="font_12white">加盟机会</a></div>  </div> <div style="clear:both;"></div>  </div>  <div id="outside_footer"> <p>Copyright 2010© 上海兰月扬教育信息咨询有限公司 All Rights Reserved.</p> </div>  </body> </html>
提示：您可以先修改部分代码再运行

作者: hj1227 发布时间: 2010-06-01

hj1227兄台，非常感谢你抽出时间帮我改正BUG，我测试了一下，在IE7下完好。
果然是前端高手，谢谢啦。

作者: eastgreat 发布时间: 2010-06-02

我是来学习的

作者: ki188 发布时间: 2010-06-02