求解：onMouseOver 下拉菜单在页面有内容的情况下经常不能随鼠标离开而自动消失

我的导航条是做了一个比较常见的跟随鼠标出现或者消失下拉菜单，本身运行的还不错，可是当页面有其他内容的时候有时运行正常，有时就出现问题，经常会鼠标放上去的时候下拉会出现，但是离开了之后就不消失了，然后就搞得一整页都是出现的下拉列表也不消失，如图，实在是不知道为什么，望高人指教 附上我用的下拉菜单的代码。 
<!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" lang="zh-CN"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>CSS下拉菜单演示</title> 
    <style type="text/css"> 
        <!-- 
        *{margin:0;padding:0;border:0;} 
        body { 
            font-family: arial, 宋体, serif; 
            font-size:12px; 
        } 
        #nav { 
            line-height: 24px; list-style-type: none; background:#666; 
        } 
        #nav a { 
            display: block; width: 80px; text-align:center; 
        } 
        #nav a:link { 
            color:#666; text-decoration:none; 
        } 
        #nav a:visited { 
            color:#666;text-decoration:none; 
        } 
        #nav a:hover { 
            color:#FFF;text-decoration:none;font-weight:bold; 
        } 
        #nav li { 
            float: left; width: 80px; background:#CCC; 
        } 
        #nav li a:hover{ 
            background:#999; 
        } 
        #nav li ul { 
            line-height: 27px; list-style-type: none;text-align:left; 
            left: -999em; width: 180px; position: absolute; 
        } 
        #nav li ul li{ 
            float: left; width: 180px; 
            background: #F6F6F6; 
        } 
        #nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px; 
        } 
        #nav li ul a:link { 
            color:#666; text-decoration:none; 
        } 
        #nav li ul a:visited { 
            color:#666;text-decoration:none; 
        } 
        #nav li ul a:hover { 
            color:#F3F3F3;text-decoration:none;font-weight:normal; 
            background:#C00; 
        } 
        #nav li:hover ul { 
            left: auto; 
        } 
        #nav li.sfhover ul { 
            left: auto; 
        } 
        #content { 
            clear: left; 
        } 
        --> 
    </style> 
    <script type=text/javascript> 
            
            function menuFix() { 
            var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
            for (var i=0; i<sfEls.length; i++) { 
                sfEls[i].onmouseover=function() { 
                this.className+=(this.className.length>0? " ": "") + "sfhover"; 
                } 
                sfEls[i].onMouseDown=function() { 
                this.className+=(this.className.length>0? " ": "") + "sfhover"; 
                } 
                sfEls[i].onMouseUp=function() { 
                this.className+=(this.className.length>0? " ": "") + "sfhover";  F
                } 
                sfEls[i].onmouseout=function() { 
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
                ""); 
                } 
            } 
        } 
        window.onload=menuFix; 
        
        </script> 
</head> 
<body> 
    <ul id="nav"> 
    <li><a href="#">产品介绍</a> 
    <ul> 
    <li><a href="#">产品一</a></li> 
    <li><a href="#">产品一</a></li> 
    <li><a href="#">产品一</a></li> 
    <li><a href="#">产品一</a></li> 
    <li><a href="#">产品一</a></li> 
    <li><a href="#">产品一</a></li> 
    </ul> 
    </li> 
    <li><a href="#">服务介绍</a> 
    <ul> 
    <li><a href="#">服务二</a></li> 
    <li><a href="#">服务二</a></li> 
    <li><a href="#">服务二</a></li> 
    <li><a href="#">服务二服务二</a></li> 
    <li><a href="#">服务二服务二服务二</a></li> 
    <li><a href="#">服务二</a></li> 
    </ul> 
    </li> 
    <li><a href="#">成功案例</a> 
    <ul> 
    <li><a href="#">案例三</a></li> 
    <li><a href="#">案例</a></li> 
    <li><a href="#">案例三案例三</a></li> 
    <li><a href="#">案例三案例三案例三</a></li> 
    </ul> 
    </li> 
    <li><a href="#">关于我们</a> 
    <ul> 
    <li><a href="#">我们四</a></li> 
    <li><a href="#">我们四</a></li> 
    <li><a href="#">我们四</a></li> 
    <li><a href="#">我们四111</a></li> 
    </ul> 
    </li> 
    <li><a href="#">在线演示</a> 
    <ul> 
    <li><a href="#">演示</a></li> 
    <li><a href="#">演示</a></li> 
    <li><a href="#">演示</a></li> 
    <li><a href="#">演示演示演示</a></li> 
    <li><a href="#">演示演示演示</a></li> 
    <li><a href="#">演示演示</a></li> 
    <li><a href="#">演示演示演示</a></li> 
    <li><a href="#">演示演示演示演示演示</a></li> 
    </ul> 
    </li> 
    <li><a href="#">联系我们</a> 
    <ul> 
    <li><a href="#">联系联系联系联系联系</a></li> 
    <li><a href="#">联系联系联系</a></li> 
    <li><a href="#">联系</a></li> 
    <li><a href="#">联系联系</a></li> 
    <li><a href="#">联系联系</a></li> 
    <li><a href="#">联系联系联系</a></li> 
    <li><a href="#">联系联系联系</a></li> 
    </ul> 
    </li> 
    </ul> 
    </body> 
    </html>

解决方案 »

  1.   

    此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
    楼主【haojie5】截止到2008-07-05 14:41:33的历史汇总数据(不包括此帖)：
    发帖的总数量:1                        发帖的总分数:20                       
    结贴的总数量:0                        结贴的总分数:0                        
    无满意结贴数:0                        无满意结贴分:0                        
    未结的帖子数:1                        未结的总分数:20                       
    结贴的百分比:0.00  %               结分的百分比:0.00  %                  
    无满意结贴率:---------------------无满意结分率:---------------------
    如何结贴请参考这里：http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html
      

  2.   

    你给几个鼠标动作放到具体的li上，这样应该没有问题的，当前你给js代码放到了前面，可能因为页面其他原因影响了执行