高手求助，鼠标离开问题

为什么鼠标还没移动到#pop的div里就隐藏了。，
该怎么写脚本啊？
<!doctype html>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;margin-top:44px;}
ul li{width:120px;background:orange;float:left;margin-left:1px}
#pop{position:absolute;top:62px;left:365px;width:120px;height:100px;}
#pop p{background:pink;margin-bottom:1px;}
</style>
<script type="text/javascript">
function lists(){
var list = document.getElementById("nav");
var item = list.getElementsByTagName("li");
for(var i=0; i<item.length; i++){
if(item[i] == item[3]){
document.getElementById("pop").style.display="block";
}
}
}
function closes(){
var pop = document.getElementById("pop");
pop.onmouseout = function(){
this.style.display = "none";
}
}
window.onload = closes;
</script>
</head>
<body>
<ul id="nav">
<li><a href="">首页</a></li>
<li><a href="">首页1</a></li> <li><a href="">首页2</a></li>
<li onmouseover="lists()"><a href="">首页3</a></li>
<li><a href="">首页4</a></li>
</ul>
<div id="pop" style="display:none">
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
</div>
</body>
</html>

解决方案 »

  1.   


    <!doctype html>
    <html>
        <head>
            <style type="text/css">
                *{margin:0;padding:0;}
                ul{list-style:none;margin-top:44px;}
                ul li{width:120px;background:orange;float:left;margin-left:1px}
                #pop{position:absolute;top:62px;left:365px;width:120px;height:100px;}
                #pop p{background:pink;margin-bottom:1px;}
            </style>
            <script type="text/javascript">
    if(typeof(HTMLElement)!="undefined") HTMLElement.prototype.contains = function(obj){
      if(obj==this)return true;
      while(obj=obj.parentNode) if(obj==this) return true;
      return false;
    } 
                function lists(){
                    var list = document.getElementById("nav");
                    var item = list.getElementsByTagName("li");
                    for(var i=0; i<item.length; i++){
                        if(item[i] == item[3]){
                            document.getElementById("pop").style.display="block";
                        }
                    }
                }
                function closes(){
                    var pop = document.getElementById("pop");
                    pop.onmouseout = function(event){
                     var e = window.event?window.event:event;
                     var obj = window.event?e.toElement:e.relatedTarget;
                     if (!this.contains(obj)){
                     this.style.display = "none";
                     }
                    }
                }
                window.onload = closes;
            </script>
        </head>
        <body>
            <ul id="nav">
                <li><a href="">首页</a></li>
                <li><a href="">首页1</a></li>                                    <li><a href="">首页2</a></li>            
                <li onmouseover="lists()"><a href="">首页3</a></li>            
                <li><a href="">首页4</a></li>
            </ul>
            <div id="pop" style="display:none">
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
            </div>
        </body>
    </html>
      

  2.   

    系浏览器的bug所致，我精简了你的代码，并做了修正：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
            <style type="text/css">
                *{margin:0;padding:0;}
                ul{list-style:none;margin-top:44px;}
                ul li{width:120px;background:orange;float:left;margin-left:1px}
                #pop
    {position:absolute;top:62px;left:365px;width:120px;height:70px;background:#fff;}
                #pop p{background:pink;margin-bottom:1px;}
            </style>
            <script type="text/javascript">
                function lists(){
                        document.getElementById
    ("pop").style.display="block";
                }
            </script>
        </head>
        <body>
            <ul id="nav">
                <li><a href="">首页</a></li>
                <li><a href="">首页1</a></li>                                    <li><a href="">首页2</a></li>            
                <li onmouseover="lists()"><a href="">首页3</a></li>            
                <li><a href="">首页4</a></li>
            </ul>
            <div id="pop" style="display:none" 
    onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
            </div>
        </body>
    </html>
    经测试IE、firefox、谷歌通过。
      

  3.   

            <script type="text/javascript">
        function lists()
    {
       var list = document.getElementById("nav");
       var item = list.getElementsByTagName("li");
        var pop = document.getElementById("pop");
        for(var i=0; i<item.length; i++)
        {
           if(item[i] == item[3])
           {
                 document.getElementById("pop").style.display="inline";
                 item[3].onmouseout=function(){pop.style.display = "none";}
           }
        }
        
         pop.onmouseover=function(){pop.style.display = "inline";}
    }
     function closes()
     {
          var pop = document.getElementById("pop");
          pop.onmouseout = function(){this.style.display = "none";}
     }
     
    window.onload = closes;
            </script>
      

  4.   

    <!doctype html>
    <html>
        <head>
            <style type="text/css">
                *{margin:0;padding:0;}
                ul{list-style:none;margin-top:44px;}
                ul li{width:120px;background:orange;float:left;margin-left:1px}
                #pop{position:absolute;top:62px;left:365px;width:120px;height:100px;}
                #pop p{background:pink;margin-bottom:1px;}
            </style>
            <script type="text/javascript">
                if(typeof(HTMLElement)!="undefined")
     HTMLElement.prototype.contains = function(obj){
                  if(obj==this)return true;
                  while(obj=obj.parentNode) if(obj==this) return true;
                  return false;
                } 
                function lists(){                        document.getElementById("pop").style.display="block";
                }
                function closes(){
                    var pop = document.getElementById("pop");
                    pop.onmouseout = function(event){
                        var e = window.event?window.event:event;
                        var obj = window.event?e.toElement:e.relatedTarget;
                        if (!this.contains(obj)){ // 防鼠标干扰，必须，不然鼠标移到 div 的子元素，也会触发div 的mouseout 事件
                            this.style.display = "none";
                        }
                    }
                }
                window.onload = closes;
            </script>
        </head>
        <body>
            <ul id="nav">
                <li><a href="">首页</a></li>
                <li><a href="">首页1</a></li>                                    <li><a href="">首页2</a></li>            
                <li onmouseover="lists()"><a href="">首页3</a></li>            
                <li><a href="">首页4</a></li>
            </ul>
            <div id="pop" style="display:none">
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
                <p><a href="">子菜单</a></p>
            </div>
        </body>
    </html>