弹出层问题

 鼠标放到menu上  弹出一个层现实2级menu鼠标不离开menu，2级menu显示
当鼠标离开menu，并且不在2级menu上的时候 ，2级menu隐藏
当鼠标在2级menu上，则不隐藏这个js如果写，大家帮忙写个简单的就可以了

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>DIV+CSS+JS二级菜单</title>
    <style type="text/css">
    <!--
    * {
    margin:0;
    padding:0;
    border:0;
    }
    body {
    background-color: #636562
    }
    #nav {
    line-height: 24px;
    list-style-type: none;
    text-align:left;/*定义整个ul菜单的行高和背景色*/
    }
    /*==================一级目录===================*/
    #nav a {
     font-family: Arial;
        font-size:11px;
        color:white;
        height:20px;
        padding-left:20px;
        font-weight:bold;
        text-decoration:none;
     padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/
    }
    #nav li {
        font-family: Arial;
        font-size:11px;
        color:white;
        height:20px;
        padding-left:20px;
        font-weight:bold;
    }
    #nav li a:hover {  
        font-family: Arial;
        font-size:11px;
        color:white;
        height:20px;
        padding-left:20px;
        font-weight:bold;
    }
    #nav a:link {
        font-family: Arial;
        font-size:11px;
        color:#ff9c12;
        height:20px;
        padding-left:20px;
        font-weight:bold;
    }
    #nav a:visited {
     font-family: Arial;
        font-size:11px;
        color:w#ff9c12;
        height:20px;
        padding-left:20px;
        font-weight:bold;
    }
    #nav a:hover {
        font-family: Arial;
        font-size:11px;
        color:#ff9c12;
        height:20px;
        padding-left:20px;
        font-weight:bold;
    }
    /*==================二级目录===================*/
    #nav li ul {
    list-style:none;
    text-align:left;
    }
    #nav li ul li {}
    #nav li ul a {
     font-family:Arial;
     font-weight:Normal;
     font-size:11px;
     color:white;
        height:20px;
        FONT-STYLE: normal;
        FONT-VARIANT: normal
    }
    /*下面是二级目录的链接样式*/#nav li ul a:link {
     font-family:Arial;
     font-weight:Normal;
     font-size:11px;
     color:#c2c2c2;
        height:20px;
        FONT-STYLE: normal;
        FONT-VARIANT: normal
    }
    #nav li ul a:visited {
        font-family:Arial;
     font-weight:Normal;
     font-size:11px;
     color:#c2c2c2;
        height:20px;
        FONT-STYLE: normal;
        FONT-VARIANT: normal}
    #nav li ul a:hover {
        font-family:Arial;
     font-weight:Normal;
     font-size:11px;
     color:#ff9900;
        height:20px;
        FONT-STYLE: normal;
        FONT-VARIANT: normal
    }
    /*==================三级目录===================*/
    ul.third {
    padding-left:0px;
    width:181px;
    background:#000000!important;
    color:#FF0000;
    text-decoration:none;
    }
    /*==============================*/#nav li:hover ul {
    left: auto;
    }
    #nav li.sfhover ul {
    left: auto;
    }
    #content {
    clear: left;
    }
    #nav ul.collapsed {
    display: none;
    }
    -->
    #PARENT {
    width:181px;
    }
    </style></head>
    <body>
    <div id="PARENT">
    <ul id="nav">
        <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">General Servers </a>
          <ul id="ChildMenu1" class="collapsed">
            <li><a href="code/city.do" target="mainFrame">System Board </a></li>
            <li><a href="code/saltUsage.do" target="mainFrame">1U Rackmount </a></li>
          </ul>
        </li>
        <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">Blade Servers</a>
          <ul id="ChildMenu2" class="collapsed">
            <li><a href="city/cityStore.do" target="mainFrame">IB4002</a></li>
            <li><a href="city/planTransport.do" target="mainFrame">IB4000</a></li>
            <li><a href="hello.jsp" target="mainFrame">ATCA</a></li>
          </ul>
        </li>
        <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">Storage</a>
          <ul id="ChildMenu3" class="collapsed">
            <li><a href="hello.jsp" target="mainFrame">SAN Storage</a></li>
            <li><a href="hello.jsp" target="mainFrame">Server Storage</a></li>
            <li><a href="hello.jsp" target="mainFrame">JBOD</a></li>
          </ul>
        </li>  
    </ul>
    </div>
    </body>
    </html>
     
    <script type=text/javascript>
    <!--
    var lastThirdElemnet;
    var LastLeftID = "";function changeSubStyle(obj) {
        var objSubChild = obj.parentNode.getElementsByTagName("ul")[0];    
        var isDisplay = objSubChild.style.display == "none";    
        objSubChild.style.display = isDisplay ? "block" : "none";
        
        if (lastThirdElemnet != null) {
            lastThirdElemnet.style.display = "none";
            lastThirdElemnet = null;
        }
        
        if (isDisplay) {
             lastThirdElemnet = objSubChild; 
        }
    }
    function menuFix() {
     var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i = 0; i < obj.length; i++) {
      obj[i].onmouseover=function() {
          this.className += (this.className.length > 0 ? " " : "") + "sfhover";
      }
      
      obj[i].onMouseDown = function() {
          this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      
      obj[i].onMouseUp = function() {
          this.className += (this.className.length > 0 ? " " : "") + "sfhover";
      }
      
      obj[i].onmouseout = function() {
          this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      }
     }
    }function DoMenu(emid) { 
     var obj = document.getElementById(emid);  if (obj != null) {
      obj.className = (obj.className.toLowerCase() == "expanded" ? "collapsed" : "expanded");
     }
     
     //关闭上一个Menu
     if ((LastLeftID != "") && (emid != LastLeftID)) {
      document.getElementById(LastLeftID).className = "collapsed";
     }
     
     LastLeftID = emid;
    }function GetMenuID() {
     var MenuID="";
     var _paramStr = new String(window.location.href);
     var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) {
      _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
     } else {
      _paramStr = "";
     } if (_paramStr.length > 0) {
      var _paramArr = _paramStr.split("&");
      
      if (_paramArr.length>0) {
          var _paramKeyVal = _paramArr[0].split("=");
          if (_paramKeyVal.length>0) {
           MenuID = _paramKeyVal[1];
          }
      }
     } if(MenuID != "") {
      DoMenu(MenuID)
     }
    }GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
    menuFix();
    -->
    </script>
      

  2.   

    // JavaScript Document
    function initZoomX(o,c,delay){ 
      var steps=12,intv=20; 
      var state="hide",tobe="",timer; 
      var tw,th; 
      var z; 
      c.style.display="block"; 
      tw=c.offsetWidth,th=c.offsetHeight; 
      c.style.display="none"; 
      z=document.createElement("div"); 
      with(z.style){ 
        position="absolute"; 
        zIndex="99"; 
        margin="0px"; 
        padding="0px"; 
        overflow="hidden"; 
        backgroundColor=(c.currentStyle||window.getComputedStyle(c,null)).backgroundColor; 
        } 
      z.appendChild(c.parentNode.removeChild(c)); 
      document.body.appendChild(z); 
      setRect(z,[-20,-20,20,20]); 
      addEvent(o,"mouseover",doover); 
      addEvent(c,"mouseover",doover); 
      addEvent(o,"mouseout",doout); 
      addEvent(c,"mouseout",doout); 
      function doover(){ 
        tobe="show"; 
        setTimeout(function(){ 
          if(state=="hide"&&tobe=="show"){ 
            state="showing"; 
            ani(true); 
            } 
          },delay); 
        } 
      function doout(){ 
        tobe="hide"; 
        setTimeout(function(){ 
          if(state=="show"&&tobe=="hide"){ 
            state="hidding"; 
            ani(false); 
            } 
          },delay); 
        } 
      function ani(bshow){ 
        var f=bshow?0:steps-1; 
        var t=bshow?steps-1:0; 
        var x=bshow?1:-1; 
        var rects=build(getRect(o),tw,th); 
        alpha(z,50); 
        for(var i=f,k=0;i!=t+x;i+=x)(function(){ 
          var j=i; 
          setTimeout(function(){ 
            setRect(z,rects[j]); 
            if(j==f&&!bshow) 
              c.style.display="none"; 
            else if(j==t){ 
              if(bshow){ 
                c.style.display="block"; 
                alpha(z,100); 
                state="show"; 
                if(tobe=="hide") 
                  doout(); 
                } 
              else{ 
                setTimeout(function(){ 
                  setRect(z,[-20,-20,20,20]); 
                  state="hide"; 
                  if(tobe=="show") 
                    doover(); 
                  },intv); 
                } 
              } 
            },(++k)*intv); 
          })(); 
        } 
      function build(r,w,h){ 
        var ret=[]; 
        var d=[r[0]+(r[2]-w)/2,r[1]+r[3]+5,w,h]; 
        if(d[0] <0) 
          c[0]=r[0]; 
        for(var i=0;i <steps-1;i++){ 
          var t=[]; 
          for(var j=0;j <4;j++) 
            t[j]=r[j]+(d[j]-r[j])*i/(steps-1); 
          ret.push(t); 
          } 
        ret.push(d); 
        return ret; 
        } 
      function alpha(ele,n){ 
        if(ele.filters) 
          ele.style.filter="alpha(opacity="+n+")"; 
        else 
          ele.style.opacity=n/100; 
        } 
      } function $(sid){ 
      return document.getElementById(sid); 
      } function addEvent(obj,evt,func){ 
      if(obj.attachEvent) 
        obj.attachEvent("on"+evt,func); 
      else if(obj.addEventListener) 
        obj.addEventListener(evt,func,false); 
      else 
        return false; 
      return true; 
      } var _firefox=navigator.userAgent.indexOf("Firefox")>=0; 
    var _opera=navigator.userAgent.indexOf("Opera")>=0; 
    var _ie=!_firefox&&!_opera; 
    function getRect(obj){ 
      var left=0,top=0; 
      var width=obj.offsetWidth,height=obj.offsetHeight; 
      var op=obj,st; 
      var abs=false; 
      if(_firefox) 
        while((op=op.parentNode).tagName!="HTML"){ 
          var st=getComputedStyle(op,null); 
          if(st.MozBoxSizing!="border-box"){ 
            left+=parseInt(st.borderLeftWidth); 
            top+=parseInt(st.borderTopWidth); 
            } 
          } 
      while(true){ 
        left+=obj.offsetLeft; 
        top+=obj.offsetTop; 
        if(!(op=obj.offsetParent)) 
          break; 
        if(_ie){ 
          left+=op.clientLeft; 
          top+=op.clientTop; 
          if(!abs&&obj.currentStyle.position=="absolute") 
            abs=true; 
          } 
        obj=op; 
        } 
      if(_ie){ 
        if(!document.documentElement.clientWidth){ 
          var t=document.body.currentStyle; 
          var lx=parseInt(t.borderLeftWidth); 
          var tx=parseInt(t.borderTopWidth); 
          left-=isNaN(lx)?2:lx; 
          top-=isNaN(tx)?2:tx; 
          } 
        else if(abs){ 
          left-=2; 
          top-=2; 
          } 
        } 
      return [left,top,width,height]; 
      } function setRect(obj,rect){ 
      with(obj.style){ 
        left=Math.round(rect[0])+"px"; 
        top=Math.round(rect[1])+"px"; 
        width=Math.round(rect[2])+"px"; 
        height=Math.round(rect[3])+"px"; 
        } 
      } addEvent(window,"load",function(){ 
      for(var i=0,m=document.getElementsByTagName("*");i <m.length;i++){ 
      var urn=m[i].getAttribute("urn"); 
        if(urn&&/^zoomx#.+/.test(urn)){ 
          var a=urn.split("#"); 
          var target=$(a[1]),delay=a[2]||200; 
          if(target) 
            initZoomX(m[i],target,parseInt(delay)); 
          } 
        } 
      }); 
    <!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>Test page </title> 
    <style type="text/css"> 
    /* <![CDATA[*/ 
    body{ 
      text-align:center; 
      padding-top:40px; 
      } 
    .hello{ 
      display:none; 
      width:200px; 
      height:200px; 
      padding:25px; 
      background-color:#cccccc; 
      color:white; 
      font:bold 16px verdana; 
      } 
    /*]]>*/ 
    </style> 
    <script language="javascript" type="text/javascript" src="zoomx.js"> </script> 
    </head> 
    <body> 
    <img urn="zoomx#y0#200" src="http://www.blueidea.com/logo.gif" /> 
    <img urn="zoomx#y1#200" src="http://www.blueidea.com/logo.gif" /> 
    <img urn="zoomx#y2#200" src="http://www.blueidea.com/logo.gif" /> 
    <img urn="zoomx#y3#200" src="http://www.blueidea.com/logo.gif" /> 
    <div id="y0" class="hello" boder="2">BlueIdea1 <br /> <br /> <small>mozart0,2007.05 </small> </div> 
    <div id="y1" class="hello">BlueIdea2 <br /> <br /> <small>mozart0,2007.05 </small> </div> 
    <div id="y2" class="hello">BlueIdea3 <br /> <br /> <small>mozart0,2007.05 </small> </div> 
    <div id="y3" class="hello">BlueIdea4 <br /> <br /> <small>mozart0,2007.05 </small> </div> 
    </body> 
    </html>
      

  3.   

    你换个没有onmouseout事件别的我都可以写   就是onmouseout不知道如何写在onmouseout里面判断
    当鼠标离开menu，并且鼠标不在2级menu上的时候 ，2级menu隐藏 
    当鼠标在2级menu上，则不隐藏 
      

  4.   

    和http://www.hellocto.com/wz/list.aspx?cid=34的菜单一样
      

  5.   


    <script>
    function $(id){
    return document.getElementById(id);
    }
    function mouse_over(){
    $("div2").style.display="block";
    }
    function mouse_out(){
    if(event.toElement.id!="div1"&&event.toElement.id!="div2"){
    $("div2").style.display="none";
    }
    }
    </script>
    <body>
    <div id=div1 style="position:absolute;left:0px;top:0px;width:100px;height:100px;background-color:red" onmouseover="mouse_over(this)" onmouseout="mouse_out(this)">div1</div>
    <div id=div2 style="display:none;position:absolute;left:0px;top:100px;width:100px;height:100px;background-color:blue" onmouseout="mouse_out(this)">div2</div>
    </body>
      

  6.   

    有个例子，试看...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>MENU TEST</title>
    </head>
    <style type="text/css">
    body,div,a:link,a:visited{font-family:verdana; font-weight:bold; font-size:11px; color:#333333;}
    a:hover,a:active{font-family:verdana; font-weight:bold; font-size:11px; color:#FF6600;}
    </style>
    <script language="javascript" type="text/javascript">
    function show(n,menuN)
    {
    var ma=n;
    var cur=menuN
    for(var i=1;i<=ma;i++)
       {
       if(i==cur)
         document.getElementById("menu0"+i+"01").style.display='block';
       else
           document.getElementById("menu0"+i+"01").style.display='none';
       }
    }
    </script>
    <body>
    <p>welcome....</p>
    <table width="100%"  border="0">
      <tr>
        <td width="19%"><a onMouseOver="javascript:show(5,1);" href="#">MENU01</a></td>
        <td width="16%"><a onMouseOver="javascript:show(5,2);" href="#">MENU02</a></td>
        <td width="19%"><a onMouseOver="javascript:show(5,3);" href="#">MENU03</a></td>
        <td width="18%"><a onMouseOver="javascript:show(5,4);" href="#">MENU04</a></td>
        <td width="28%"><a onMouseOver="javascript:show(5,5);" href="#">MENU05</a></td>
      </tr>
      <tr>
        <td width="19%"><div style="display:none; position:relative; width:300px; height:30px;" id="menu0101" onMouseOut="javascript:this.style.display='none';" onMouseOver="javascript:this.style.display='block';"><a href="#">sub menu01</a>  <a href="#">sub menu02</a>  <a href="#">sub menu03</a></div></td>
        <td width="16%"><div style="display:none; position:relative; width:300px; height:30px;" id="menu0201" onMouseOut="javascript:this.style.display='none';" onMouseOver="javascript:this.style.display='block';"><a href="#">sub menu01</a>  <a href="#">sub menu02</a>  <a href="#">sub menu03</a></div></td>
        <td width="19%"><div style="display:none; position:relative; width:300px; height:30px;" id="menu0301" onMouseOut="javascript:this.style.display='none';" onMouseOver="javascript:this.style.display='block';"><a href="#">sub menu01</a>  <a href="#">sub menu02</a>  <a href="#">sub menu03</a></div></td>
        <td width="18%"><div style="display:none; position:relative; width:300px; height:30px;" id="menu0401" onMouseOut="javascript:this.style.display='none';" onMouseOver="javascript:this.style.display='block';"><a href="#">sub menu01</a>  <a href="#">sub menu02</a>  <a href="#">sub menu03</a></div></td>
        <td width="28%"><div style="display:none; position:relative; width:300px; height:30px;" id="menu0501" onMouseOut="javascript:this.style.display='none';" onMouseOver="javascript:this.style.display='block';"><a href="#">sub menu01</a>  <a href="#">sub menu02</a>  <a href="#">sub menu03</a></div></td>
      </tr>
    </table>
    </body>
    </html>
      

  7.   

    他那个网站的menu上源代码里面没有onmouseout事件 不知道写在哪里的找他的这个功能的js也没有找到