JS做的导航栏效果的问题

现在我有2个问题，1个是我设置了timeout之后鼠标点上去然后离开后，2级栏并没有消失，还有就是点了这个之后移动到另外一个上面去之后，只是很快的闪一下。然后就不见了
另外可以的话，我还想用CSS＋JS做一段渐显和渐隐的方法<script language="JavaScript">var timeOut;
var timeIn;
var timerlineTimer;
var qx;function runTimeline(){
alert(window.timerlineTimer);
window.timerlineTimer = setTimeout("mouseOut()",1000);
}function stopTimeline(){
clearTimeout(window.timerlineTimer);
}//鼠标进入
function mouseIn(x){
switch(x){
case 1:
o = document.getElementById("sub1");
o.style.display = "block"

//timeIn = window.setTimeout("mouseIn()", 1);
break;
case 2:
o = document.getElementById("sub2");
o.style.display = "block"

timeIn = window.setTimeout("mouseIn()", 1);
break;
}}//鼠标移除范围
function mouseOut(){



for(var i=1; i<2; i++){
id = "sub" + i;
o = document.getElementById(id);
o.style.display="none";
timeOut = window.setTimeout("mouseOut()", 1);
}

}
</script>
<table border="1" width="800" height="100" >
<tr>
     <td height="50%"><div  onMouseOut="runTimeline()" onMouseOver="mouseIn(1); stopTimeline();"><a href="" >123</a></div></td>
        <td><div onMouseOut="runTimeline()" onMouseOver="mouseIn(2); stopTimeline();"><a href=""> 321</a></div></td>
    </tr>
    
    <tr>
     <td><div id="sub1" style="display:none" onMouseOut="runTimeline()" onMouseOver="stopTimeline();"><a href="" >321</a>  <a href="" >3422</a></div>
        
        </td>
        
        <td><div id="sub2" style="display:none" onMouseOut="runTimeline()" onMouseOver="stopTimeline();"><a href="" >12345</a>  <a href="">54321</a></div>
        </td>
    </tr>
</table>这个是我的代码

解决方案 »

  1.   

    <!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>nav</title>
    <script language="javascript">
    // JavaScript Document
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    </script>
    <style type="text/css">
    <!--
    body {
    font: normal 11px verdana;
    }
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    }
    ul li {
    position: relative;
    }
    li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    }
    /* Styles for Menu Items */
    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc; /* IE6 Bug */
    border-bottom: 0;
    }
    /* Holly Hack. IE Requirement \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    li:hover ul, li.over ul { display: block; } /* The magic */
    -->
    </style>
    </head>
    <body>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Offices</a></li>
    </ul>
    </li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Internet Marketing</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Domain Names</a></li>
    <li><a href="#">Broadband</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a>
    <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">France</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Australia</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
      

  2.   

    用onmouseover这个事件比较好
      

  3.   

    另外可以参考下http://leechangjin.co.kr/baby/这个网站的导航栏的效果。。我要做的就是这样的，另外他的导航栏不是用FLASH做的
      

  4.   

    this?http://leechangjin.co.kr/baby/menu.swf
      

  5.   


    <script language="JavaScript"> 
    var timerlineTimer; 
    var menuNum=3 
    function runTimeline(){ 
    timerlineTimer = setTimeout("resetMenu()",1000); 
    } 
    function stopTimeline(){ 
    clearTimeout(timerlineTimer); 
    }function resetMenu(){
    for (var i=1;i<=menuNum;i++)document.getElementById("sub"+i).style.display = "none"
    } 
    function mouseIn(x,k){//鼠标进入 
    resetMenu(k)
    document.getElementById("sub"+x).style.display = "block" 
    } 
    </script> 
    <table border="1" width="800" height="100" > 
    <tr> 
        <td height="50%"> <div  onMouseOut="runTimeline()" onMouseOver="mouseIn(1,3); stopTimeline();"> <a href="" >1-1 </a> </div> </td> 
        <td> <div onMouseOut="runTimeline()" onMouseOver="mouseIn(2,3); stopTimeline();"> <a href=""> 1-2 </a> </div> </td> 
        <td> <div onMouseOut="runTimeline()" onMouseOver="mouseIn(3,3); stopTimeline();"> <a href=""> 1-3 </a> </div> </td> 
    </tr> 
        
    <tr> 
        <td colspan="3"> 
        <div id="sub1" style="display:none" onMouseOut="runTimeline()" onMouseOver="stopTimeline();"> 
        <a href="" >1=1--1</a>   
        <a href="" >1=1--2</a>  
        </div> 
        <div id="sub2" style="display:none" onMouseOut="runTimeline()" onMouseOver="stopTimeline();"> 
        <a href="" >2=2--1</a> 
        <a href="" >2=2--2</a>   
        </div> 
        <div id="sub3" style="display:none" onMouseOut="runTimeline()" onMouseOver="stopTimeline();"> 
        <a href="" >3=3--1</a> 
        <a href="" >3=3--2</a>   
        </div> 
        </td> 
    </tr> 
    </table>
      

  6.   

    上面那个是我想做到的效果了另外能不能帮我添加一下CSS，让他能渐显和渐隐？我对CSS不是很熟悉。