高分请教一个js下拉菜单的问题，急……

提供参考代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
body { background:#ddd;font-family: arial, 宋体, serif;font-size:12px; text-align:center}
#top{width:760px;background: url(nav1.gif) #ddd; margin:0 auto; margin-top:5px;border:1px solid #ccc; text-align:left;}
#flash,#top,#menu li ul,#main{filter:progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=#333333 , direction=135 , strength=3);}
#top h2{margin:0; height:24px; line-height:24px; text-indent:10px; color:#009; font-size:13px;}
#menu { height:24px;line-height:26px;list-style-type:none; margin:0;background:#666; float:right}
#menu a {display:block; width:80px; text-align:center;text-decoration:none;}
#menu li {float:left;width:80px;}
#menu li a{background: url(nav1.gif) #ddd;color:#c00; border-left:1px solid #ccc}
#menu li a:hover{background:#eee; color:#f00}
#menu li ul {line-height:27px;list-style-type:none;text-align:left;left:-999em; width:161px; position:absolute;border:1px solid #ccc;}
#menu li ul li{float:left;}
#menu li ul a{display:block; width:161px;text-align:left; text-indent:1em; border:0}
#menu li ul a:link  {background:#eee;color:#666;}
#menu li ul a:visited {background:#eee;color:#666;}
#menu li ul a:hover {color:#F00;font-weight:normal;background:#fff;}
#menu li:hover ul {left:auto; margin-left:0px}
#menu li.sfhover ul {left:auto;margin-left:0px}
#flash{ width:762px; height:100px; margin-top:5px; background:#c00; border:0px solid #ccc}
#main{ width:760px;margin-top:5px; background: #eee; border:1px solid #ccc}
.side{width:274px; margin:0; border-right:1px solid #ccc; float:left; text-align:left; height:300px}
.cont{float:right; width:485px;}
.bott{clear:both; height:10px; background:#ddd}
#bottom{width:760px;font-size:10px;color:#999}
#bottom h5{ float:left}
#bottom h6{ float:right}
#bottom h5,#bottom h6{font-size:10px; margin:0; padding:5px 0; font-weight:normal}
-->
</style>
<script type="text/javascript">
function menuFix() {
    var sfEls = document.getElementById("menu").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";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
        }
    }
}
window.onload=menuFix;
</script>
</head>
<body>
<div id="flash"></div>
<div id="top">
<ul id="menu">
<li><a href="#">站点首页</a></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>
    </ul>
  </li>
  <li><a href="#">成功案例</a>
    <ul>
      <li><a href="#">案例三</a></li>    </ul>
  </li>
  <li><a href="#">关于我们</a>
    <ul>
      <li><a href="#">我们四</a></li>
      <li><a href="#">我们四</a></li>
    </ul>  </li>
<li><a href="#">联系我们</a></li>
</ul>
<h2>Jenfy.cn</h2>
</div>
<div id="main">
<div class="side">
</div>
<div class="cont"></div>
</div>
<div id="bottom">
<h5>Copyright 2008 Jenfy.cn All Right Reserved </h5>
<h6>Design By Jenfy 20080228</h6></div>
</body>
</html> 

解决方案 »

  1.   

    貌似楼上也有问题，给楼主个网站，里面好多效果，楼主里面搜索下拉菜单，好好找找吧，这种东西，网上一搜一大堆http://www.blueidea.com/tech/web/
      

  2.   

    <div id="t2Con" onmouseover="clearTimeout(test);" onmouseout="bigFade(this);">
    <ol class="submenu" >
    <li><a href="">submenu1</a></li>
    </ol>
    </div>以上代码经测试，
    在鼠标从外部移动到submenu1这段文字上的过程中 onmouseout="bigFade(this);"触发了3次；
    再把鼠标从submenu1上完全移出div，onmouseout="bigFade(this);"又触发了4次；
    如果所有标签的边界完全重叠(只是假设，实际是不可能的)~！移入鼠标将不触发 onmouseout="bigFade(this);只在移出时触发一次；回到楼主的代码：只要触发一次onmouseout="bigFade(this); 这个主体就会被隐藏了，于是GAME OVER~！我目前还没有搞清楚为什么会在移动到子标签（ol、li、a）上的时候会有离开根（div）标签的动作；
    我好像看到过关于这方面的说明，但一时找不到，希望有高手能够解释！
      

  3.   

    针对找到的问题，你可以将
    function bigFade(e){
        e.style.display='none';
        }
    修改为：
    function bigFade(e){
        var obj = event.toElement;
        while( obj!=null && obj.id!=e.id){
            obj = obj.parentElement;
        }
        if( obj==null ){ e.style.display = 'none'; }
    }
      

  4.   

    非常感谢 pla18sep  的分析