Maison > Article > interface Web > js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose
js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:08:411514parcourir
js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦~~
单独的菜单是可以的，放入页面中就不正常了，是怎么回事呀，高手帮忙~~
蛋糕目录中是正常的，在关于我们里就弹一下就没了显示，是啥原因呀[img=http://hi.csdn.net/space-4200912-do-album-picid-1082995-goto-down.html][/img]
<!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=gb2312" /><title>Chinaz菜单导航</title><style type="text/css"><!--div, ul, p{ margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}/* Nav==========================================================*/.nav {width:990px; position: relative; margin:0px auto;}.navinner { background-color:#000000;}.navlist { height: 45px; line-height: 36px; overflow: hidden; }.nav li { float: left; display: inline; margin: 0 0 0 -2px;}.nav a { display: block; width: 200px; text-align: center; font-size: 120%;}.nav a:link, .nav a:visited { color: #fff;}.nav a.current, .nav a:hover, .nav a:active { color: #fff; font-weight: bold;}.subnav { position: absolute; top: 41px; left: 0; float: left; height: 30px; width:990px; line-height: 28px; white-space: nowrap; background-color:#1b0908;}* html .subnav { margin: 0 10px 0 -10px; /* IE 6 and below */}.subnav p { padding: 0 10px;}.subnav p span { display: block;}.subnav p.pointer { position: absolute; top: 5px; left: 0; height: 5px; width: 11px; padding: 0; margin-left: 20px; text-indent: -999em; }.subnav a { display: inline; padding: 0; font-size: 100%;}[class~="subnav"] a { }.subnav, .subnav a:link, .subnav a:visited { color: #235e99;}.subnav a:hover, .subnav a:active { color: #235e99;}.subnav a:hover, .subnav a:active { font-weight: normal; background: none; }/* subnav position and pointer position */#subnav1 { left: auto; right: 0px; }#subnav2 { left: auto; right: 0px; }#subnav3 { left: auto; right: 0px; }#subnav4 {left: auto; right: 0px;}#subnav5, #subnav6, #subnav7 { left: auto; right: 0px;}#subnav1 .pointer,#subnav2 .pointer,#subnav3 .pointer,#subnav4 .pointer { left: auto; }#subnav5 .pointer { left: auto; right: 290px; }#subnav6 .pointer { left: auto; right: 180px; }#subnav7 .pointer { left: auto; right: 70px; }#subnav1, #subnav2, #subnav3, #subnav4 { min-width: 110px;}#subnav5 { min-width: 340px; }#subnav6 { min-width: 240px; }#subnav7 { min-width: 130px; }/* Note==========================================================*/.note { margin: 0 15px 10px; color:#666666;}.note span{ float:right;}.disable { display: none;}--></style><script type="text/javascript"><!--function $(id) { return document.getElementById(id);}function showMenu (baseID, divID) { baseID = $(baseID); divID = $(divID); if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; showMenu.cur = divID; if (! divID.isCreate) { divID.isCreate = true; //divID.timer = 0; divID.onmouseover = function () { if (showMenu.timer) clearTimeout(showMenu.timer); hideCur(); divID.style.display = 'block'; }; function hide () { showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000); } divID.onmouseout = hide; baseID.onmouseout = hide; } function hideCur () { showMenu.cur && (showMenu.cur.style.display = 'none'); }}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></head><body ><div onload="MM_preloadImages('images/1_.gif','images/2_.gif','images/_1_ .gif','images/3_.gif','images/4_.gif','images/5_.gif','images/6_.gif','images/_2_ .gif','images/_3_ .gif','images/_4_ .gif','images/_01_.gif','images/_02_.gif','images/_03_.gif','images/_04_.gif')"><div class="nav"><div class="navinner"> <ul class="navlist"> <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/1_.gif',1)"><img src="images/1.gif" name="Image1" border="0" id="Image1" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a></li> <li><a href="product.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/2_.gif',1)" onClick="showMenu('Image2','subnav1')"><img src="images/2.gif" name="Image2" border="0" id="Image2" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> <div class="subnav disable" id="subnav1"> <p class="pointer">.</p> <p><span> <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/_1_ .gif',1)"><img src="images/_1.gif" name="Image7" style="max-width:90%" style="max-width:90%" border="0" id="Image7" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/_2_ .gif',1)"><img src="images/_2.gif" name="Image8" style="max-width:90%" style="max-width:90%" border="0" id="Image8" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/_3_ .gif',1)"><img src="images/_3.gif" name="Image9" style="max-width:90%" style="max-width:90%" border="0" id="Image9" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/_4_ .gif',1)"><img src="images/_4.gif" name="Image10" style="max-width:90%" style="max-width:90%" border="0" id="Image10" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> </span></p> </div> </li> <li><a href="activity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/3_.gif',1)" onClick="showMenu('Image3','subnav2')"><img src="images/3.gif" name="Image3" border="0" id="Image3" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> </li> <li><a href="jifen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/4_.gif',1)" onClick="showMenu('Image4','subnav3')"><img src="images/4.gif" name="Image4" border="0" id="Image4" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> </li> <li><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/5_.gif',1)" onClick="showMenu('Image5','subnav4')"><img src="images/5.gif" name="Image5" border="0" id="Image5" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a> <div class="subnav disable" id="subnav4"> <p class="pointer">.</p> <p><span> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/_01_.gif',1)"><img src="images/_01.gif" name="Image11" style="max-width:90%" style="max-width:90%" border="0" id="Image11" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/_02_.gif',1)"><img src="images/_02.gif" name="Image12" style="max-width:90%" style="max-width:90%" border="0" id="Image12" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/_03_.gif',1)"><img src="images/_03.gif" name="Image13" style="max-width:90%" style="max-width:90%" border="0" id="Image13" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/_04_.gif',1)"><img src="images/_04.gif" name="Image14" style="max-width:90%" style="max-width:90%" border="0" id="Image14" / alt="js菜单下拉，怎么有一个可以正常显示，另一个点击一闪就没啦_html/css_WEB-ITnose" ></a><a href="#"></a> </span></p> </div> </li> </li> </ul></div> </div></div></div></body></html>
回复讨论(解决方案)
蛋糕目录中是正常的，在关于我们里就弹一下就没了显示
你这些在哪。。
我这ie8和火狐都没什么反应
我的资源里有纯css+div的弹出菜单，可供你参考。
会不会跟事件冒泡有关？你去网上查查怎么JS阻止事件冒泡，应该在弹出框显示的代码后面加上阻止事件冒泡，就会好了。
事件冒泡与浏览器有关，具体写法，网上也都找得到的，我从前在工作中也遇到过类似的情况。。希望可以帮助到你。
我佩服你的勇气啊，看到你写的html，好像是直接在dreamweaver里操作的弹出隐藏，太复杂了，且不易维护更新，去学下div+css+jquery，图片的切换现在很多都是用css sprite（把一些琐碎图片放到整张大图片），做成背景的切换，导航弹出同隐藏也比较流行的是jquery实现效果
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：css控制gif图片作为网页的背景_html/css_WEB-ITnoseArticle suivant：请问如何调节这个布局的文字上下高度，谢谢！_html/css_WEB-ITnose