js menu drop-down, how come one can be displayed normally, but the other one disappears when clicked~~
A separate menu is OK, but it is not normal when placed on the page. What is going on, expert? Help~~
The cake directory is normal, but when I click on it in About Us, it disappears. What’s the reason? [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" /></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" /></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" width="117" height="28" border="0" id="Image7" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/_2_ .gif',1)"><img src="images/_2.gif" name="Image8" width="111" height="28" border="0" id="Image8" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/_3_ .gif',1)"><img src="images/_3.gif" name="Image9" width="121" height="28" border="0" id="Image9" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/_4_ .gif',1)"><img src="images/_4.gif" name="Image10" width="121" height="28" border="0" id="Image10" /></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" /></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" /></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" /></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" width="121" height="28" border="0" id="Image11" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/_02_.gif',1)"><img src="images/_02.gif" name="Image12" width="117" height="28" border="0" id="Image12" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/_03_.gif',1)"><img src="images/_03.gif" name="Image13" width="111" height="28" border="0" id="Image13" /></a><a href="#"></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/_04_.gif',1)"><img src="images/_04.gif" name="Image14" width="121" height="28" border="0" id="Image14" /></a><a href="#"></a> </span></p> </div> </li> </li> </ul></div> </div></div></div></body></html>
It is normal in the cake directory. Just click on it in About Us and it will disappear.
Where are you? .
My IE8 and Firefox have no response
I have a pure CSS div pop-up menu in my resources for your reference.
Could it be related to event bubbling? You can go online and check how to prevent event bubbling with JS. You should add the code to prevent event bubbling after the code displayed in the pop-up box, and it will be fine.
Event bubbling is related to the browser. The specific writing method can be found online. I have encountered a similar situation at work before. . Hope this helps.
I admire your courage. When I saw the html you wrote, it seemed like the pop-up hiding was done directly in Dreamweaver. It was too complicated and difficult to maintain and update. Go learn div css jquery and image switching. Nowadays, many people use css sprite (putting some trivial pictures into the whole big picture) to make background switching, navigation pop-up and hiding. It is also more popular to use jquery to achieve the effect
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
