为什么光标离开后下拉列表那么快就隐藏的?

大家试试.用光标慢慢的移动到下拉列表上不会隐藏.而快速的移动下拉列表就会立即隐藏掉.为什么呢. 
这样当链接还没点击到就隐藏了. 
<html>
<head>
<style>
*{margin:0;padding:0;}
ul{
list-style:none;
}
#menu{
width:860px;
margin:55px auto;
font-size:13px;
border:1px solid orange;
overflow:hidden;
}
#tabMenu{
background:orange;
height:30px;
width:870px;
}
#tabMenu li{
float:left;
line-height:30px;
width:143px;
background:#fdceff;
margin-right:1px;
text-align:center;
}
#tabMenu .bgcaption{
background:#fbb7fd;
color:#fff;
font-weight:bold;
}
#tabContent{
width:860px;
position:relative;
height:100px;
}
#tabContent ul{
background:#fbb7fd;
width:144px;
position:absolute;
top:0;
left:0;
}
#tabContent .current{
display:block;
}
#tabContent .normal{
display:none;
}
</style> <script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu");
var tablist = tabMenu.getElementsByTagName("li");
for(var i=0; i<tablist.length; i++){
var m = i+1;
if(i == num){
document.getElementById("list_"+m).className ="current";
tablist[i].className = "bgcaption";
document.getElementById("list_"+m).style.left = num*144+"px";
}
else{
document.getElementById("list_"+m).className ="normal";
tablist[i].className = ""
}
var content = document.getElementById("tabContent")
var list = content.getElementsByTagName("ul")
list[i].onmouseout = function(){
this.className ="normal";
}
}
}
</script>
</head>
<body>
<div id="menu">
<div id="tabMenu">
<ul>
<li onmouseover="tabChange(0)">新闻</li>
<li onmouseover="tabChange(1)">游戏</li>
<li onmouseover="tabChange(2)">聊天</li>
<li onmouseover="tabChange(3)">产品</li>
<li onmouseover="tabChange(4)">音乐</li>
<li onmouseover="tabChange(5)">论坛</li>
</ul>
</div> <div id="tabContent">
<ul id="list_1">
<li><a href="">网易新闻</a></li>
<li><a href="">新浪新闻</a></li>
<li><a href="">腾讯新闻</a></li>
<li><a href="">搜狐新闻</a></li>
</ul>
<ul id="list_2" class="normal">
<li><a href="">网络游戏</a></li>
<li><a href="">单机游戏</a></li>
<li><a href="">小游戏</a></li>
</ul>
<ul id="list_3" class="normal">
<li><a href="">QQ即时通</a></li>
<li><a href="">msn即时通</a></li>
</ul>
<ul id="list_4" class="normal">
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
</ul>
<ul id="list_5" class="normal">
<li><a href="">在线试听</a></li>
<li><a href="">下载歌词</a></li>
</ul>
<ul id="list_6" class="normal">
<li><a href="">天涯社区</a></li>
<li><a href="">猫扑论坛</a></li>
</ul>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    你用错事件了，不要用onmouseout，用onmouseleave.
    如下：            function tabChange(num){
                    var tabMenu = document.getElementById("tabMenu");
                    var tablist = tabMenu.getElementsByTagName("li");
                    for(var i=0; i<tablist.length; i++){
                        var m = i+1;
                        if(i == num){
                            document.getElementById("list_"+m).className ="current";
                            tablist[i].className = "bgcaption";
                            document.getElementById("list_"+m).style.left = num*144+"px";
                        }
                        else{
                            document.getElementById("list_"+m).className ="normal";
                            tablist[i].className = ""                        
                        }
                        var content = document.getElementById("tabContent")
                        var list = content.getElementsByTagName("ul")
                        list[i].onmouseleave = function(){
                            this.className ="normal";
                        }
                    }
                }
      

  2.   

    要不就换事件，要不就在里面用setTimeout延时下
      

  3.   

    因为你的ul里面有li标签，根据事件冒泡，ul的onmouseout会被传递到li上面,onmouseout事件，浏览器会把ul和li做为两个object会冒泡，onmouseleave则是把ul和li看成一个对象，不过只有IE才有这个东西！！好像是这样，嘿嘿
      

  4.   

    一楼方法很好.用对事件就OK了.
    但是用原来的ONMOUSEOUT也是可以的,只是需要象下面这样加点料:<html>
        <head>
            <style>
                *{margin:0;padding:0;}
                ul{
                    list-style:none;
                }
                #menu{
                    width:860px;
                    margin:55px auto;
                    font-size:13px;
                    border:1px solid orange;
                    overflow:hidden;
                }
                #tabMenu{
                    background:orange;
                    height:30px;
                    width:870px;
                }
                #tabMenu li{
                    float:left;
                    line-height:30px;
                    width:143px;
                    background:#fdceff;
                    margin-right:1px;
                    text-align:center;
                }
                #tabMenu .bgcaption{
                    background:#fbb7fd;
                    color:#fff;
                    font-weight:bold;
                }
                #tabContent{
                    width:860px;
                    position:relative;
                    height:100px;
                }
                #tabContent ul{
                    background:#fbb7fd;
                    width:144px;
                    position:absolute;
                    top:0;
                    left:0;
                }
                #tabContent .current{
                    display:block;
                }
                #tabContent .normal{
                    display:none;
                }
            </style>        <script type="text/javascript">
             var it=0;
                function tabChange(num){
                 it=num;
                    var tabMenu = document.getElementById("tabMenu");
                    var tablist = tabMenu.getElementsByTagName("li");
                    for(var i=0; i<tablist.length; i++){
                        var m = i+1;
                        if(i == num){
                            document.getElementById("list_"+m).className ="current";
                            tablist[i].className = "bgcaption";
                            document.getElementById("list_"+m).style.left = num*144+"px";
                        }
                        else{
                            document.getElementById("list_"+m).className ="normal";
                            tablist[i].className = ""                        
                        }
                        var content = document.getElementById("tabContent")
                        var list = content.getElementsByTagName("ul")
                        list[i].onmouseout = function(){
                            this.className ="normal";
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="menu">
                <div id="tabMenu">
                    <ul>
                        <li onmouseover="tabChange(0)">新闻</li>
                        <li onmouseover="tabChange(1)">游戏</li>
                        <li onmouseover="tabChange(2)">聊天</li>
                        <li onmouseover="tabChange(3)">产品</li>
                        <li onmouseover="tabChange(4)">音乐</li>
                        <li onmouseover="tabChange(5)">论坛</li>                    
                    </ul>
                </div>            <div id="tabContent" onmouseover="tabChange(it)">
                    <ul id="list_1">
                        <li><a href="">网易新闻</a></li>
                        <li><a href="">新浪新闻</a></li>
                        <li><a href="">腾讯新闻</a></li>
                        <li><a href="">搜狐新闻</a></li>                    
                    </ul>
                    <ul id="list_2" class="normal">
                        <li><a href="">网络游戏</a></li>
                        <li><a href="">单机游戏</a></li>
                        <li><a href="">小游戏</a></li>
                    </ul>
                    <ul id="list_3" class="normal">
                        <li><a href="">QQ即时通</a></li>
                        <li><a href="">msn即时通</a></li>
                    </ul>
                    <ul id="list_4" class="normal">
                        <li><a href="">暂无!</a></li>
                        <li><a href="">暂无!</a></li>
                        <li><a href="">暂无!</a></li>
                        <li><a href="">暂无!</a></li>                    
                    </ul>
                    <ul id="list_5" class="normal">
                        <li><a href="">在线试听</a></li>
                        <li><a href="">下载歌词</a></li>                    
                    </ul>
                    <ul id="list_6" class="normal">
                        <li><a href="">天涯社区</a></li>
                        <li><a href="">猫扑论坛</a></li>                    
                    </ul>
                </div>
            </div>
        </body>
    </html>
      

  5.   

    加了料也不行啊!
    还有为什么要加 var it=0;
    it=num;
    这两个
      

  6.   

    onmouseleave   FF不支持