JS鼠标移动触发事件

我想当鼠标移出menubar和menubar2两个层后便将其隐藏，可现在鼠标还没有移出那两个层变会隐藏，不明白为什么希望高手帮忙改正……谢谢！！！<!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>无标题文档</title>
<script language="JavaScript1.2" type="text/javascript">
        var maxmnus = 3
        function opTab(event) {
            var mnu = document.getElementById("menubar");
            var arrdiv = document.getElementById("arrow");
            var arrtxt = document.getElementById("arr");            var mnu2 = document.getElementById("menubar2");
            var arrdiv2 = document.getElementById("arrow2");
            var arrtxt2 = document.getElementById("arr2");
            if ((mnu.style.display != "block") || (mnu.style.display == "")) {
                mnu.style.display = "block";
                arrdiv.style.left = mnu.offsetWidth + "px";                mnu2.style.display = "block"
                mnu2.style.width = "750px";
                arrdiv2.style.left = "220px";
                arrdiv2.style.top = "160px";
                arrdiv2.style.width = "750px";
            } 
            event.cancelBubble = true;
        }
        function func() {
            document.getElementById("menubar").style.display = "none"
            document.getElementById("arrow").style.left = 0;
            document.getElementById("menubar2").style.display = "none"
            document.getElementById("arrow2").style.left = 0;            document.getElementById("arrow2").style.width = "970px";
            document.getElementById("arrow2").style.left = "0px";
            document.getElementById("arrow2").style.top = "0px";
        }
        function outM(event) {
            setInterval("func()", 4000);
        }
    </script>    <style type="text/css">
        #main_content
        {
            position: relative;
        }
        #menubar
        {
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
            background-color: #7C6F57;
            font-family: Verdana,Helvetica,Arial;
            font-weight: 700;
            font-size: 12px;
            cursor: hand;
            z-index: 5;
            background-repeat: repeat-y;
        }
        .indicator
        {
            color: #b24426;
            font-family: Webdings;
            font-weight: bold;
            font-size: 10px;
        }
        .r1
        {
            position: relative;
            top: 10px;
            left: 5px;
            width: 213px;
            color: #e7e8f1;
            border-left: #e7e8f1 2px outset;
            border-top: #e7e8f1 2px outset;
            border-right: #e7e8f1 2px outset;
            border-bottom: #e7e8f1 2px outset;
            padding-left: 5px;
            padding-top: 1px;
            padding-right: 5px;
            padding-bottom: 1px;
            background-repeat: repeat-y;
            cursor: hand;
        }
        .submenu1
        {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            border-left: #e0f8e3 2px inset;
            border-top: #e0f8e3 2px inset;
            border-right: #e0f8e3 2px inset;
            border-bottom: #e0f8e3 2px inset;
            padding-left: 3px;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            display: none;
            color: #2644b2;
            font-family: Verdana,Helvetica,Arial;
            font-weight: 700;
            font-size: 12px;
            background-color: #cff1d4;
            background-repeat: repeat-y;
        }
        .submenu2
        {
            position: relative;
            top: 0px;
            left: 0px;
            width: 90%;
            border-left: #e0f8e3 3px groove;
            border-top: #e0f8e3 3px groove;
            border-right: #e0f8e3 3px groove;
            border-bottom: #e0f8e3 3px groove;
            padding-left: 3px;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            margin-top: 4px;
            display: none;
            background-color: #cff1d4;
            color: #2644b2;
            font-family: Verdana,Helvetica,Arial;
            font-weight: 700;
            font-size: 10px;
            background-repeat: repeat-y;
        }
        .pulltab
        {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 600px;
            width: 10px;
            font-size: 10px;
            z-index: 5;
            background-color: #666;
        }
        .mtab
        {
            position: relative;
            top: 0px;
        }
        .btninner
        {
            cursor: hand;
            width: 100%;
        }
        #menubar2
        {
            position: absolute;
            top: 0px;
            left: 220px;
            display: none;
            background-color: #EDF6FF;
            font-family: Verdana,Helvetica,Arial;
            font-weight: 700;
            font-size: 12px;
            cursor: hand;
            z-index: 5;
            background-repeat: repeat-y;
            border: solid 1px #AABCE0;
        }
        .pulltab2
        {
            background-color: #666666;
            font-size: 10px;
            height: 10px;
            left: 10px;
            position: absolute;
            top: 0px;
            width: 100%;
            z-index: 5;
        }
    </style>
</head><body>
    <div id="nav">
        <div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
           
        </div>
        <div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
          
        </div>
    </div>
    <div id="navb">
        <div id="arrow" class="pulltab" onmouseover="opTab(event)">
        </div>
        <div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
        </div>
    </div>
    <div style="position: absolute; left: 10px; top: 10px; z-index:0;">
主体部分
    </div>
</body>
</html>

解决方案 »

  1.   

    建议楼主在每个层加上border:1px solid red;或者其他颜色，你可以再测试一下，应该和你想的不一样
      

  2.   

    刚才代码有点多  我又精简了一下请高手帮忙修改………………
    <!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>无标题文档</title>
    <script language="JavaScript1.2" type="text/javascript">
      var maxmnus = 3
      function opTab(event) {
      var mnu = document.getElementById("menubar");
      var arrdiv = document.getElementById("arrow");
      var arrtxt = document.getElementById("arr");  var mnu2 = document.getElementById("menubar2");
      var arrdiv2 = document.getElementById("arrow2");
      var arrtxt2 = document.getElementById("arr2");
      if ((mnu.style.display != "block") || (mnu.style.display == "")) {
      mnu.style.display = "block";
      arrdiv.style.left = mnu.offsetWidth + "px";  mnu2.style.display = "block"
      mnu2.style.width = "750px";
      arrdiv2.style.left = "220px";
      arrdiv2.style.top = "160px";
      arrdiv2.style.width = "750px";
      }  
      event.cancelBubble = true;
      }
      function func() {
      document.getElementById("menubar").style.display = "none"
      document.getElementById("arrow").style.left = 0;
      document.getElementById("menubar2").style.display = "none"
      document.getElementById("arrow2").style.left = 0;
      document.getElementById("arrow2").style.width = "970px";
      document.getElementById("arrow2").style.left = "0px";
      document.getElementById("arrow2").style.top = "0px";
      }
      function outM(event) {
      setInterval("func()", 4000);
      }
      </script>
      <style type="text/css">
            #main_content
            {
                position: relative;
            }
            #menubar
            {
                position: absolute;
                top: 0px;
                left: 0px;
                display: none;
                background-color: #7C6F57;
                font-family: Verdana,Helvetica,Arial;
                font-weight: 700;
                font-size: 12px;
                cursor: hand;
                z-index: 5;
                background-repeat: repeat-y;
            }
            .pulltab
            {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 600px;
                width: 10px;
                font-size: 10px;
                z-index: 5;
                background-color: #666;
            }
            #menubar2
            {
                position: absolute;
                top: 0px;
                left: 220px;
                display: none;
                background-color: #EDF6FF;
                font-family: Verdana,Helvetica,Arial;
                font-weight: 700;
                font-size: 12px;
                cursor: hand;
                z-index: 5;
                background-repeat: repeat-y;
                border: solid 1px #AABCE0;
            }
            .pulltab2
            {
                background-color: #666666;
                font-size: 10px;
                height: 10px;
                left: 10px;
                position: absolute;
                top: 0px;
                width: 100%;
                z-index: 5;
            }
        </style>
    </head>
    <body>
      <div id="nav">
      <div id="menubar" style="height: 100%; width: 210px" onmouseout="outM(event)">
      </div>
      <div id="menubar2" style="width: 960px; height: 160px" onmouseout="outM(event)">
      </div>
      </div>
      <div id="navb">
      <div id="arrow" class="pulltab" onmouseover="opTab(event)">
      </div>
      <div id="arrow2" class="pulltab2" onmouseover="opTab(event)">
      </div>
      </div>
      <div style="position: absolute; left: 10px; top: 10px; z-index:0;">
    主体部分
      </div>
    </body>
    </html>
      

  3.   

    如何延时执行onmouseout里的代码啊？怎么没有人呢？