JavaScript的变化内容和滚动菜单错误的地方

Question

这个问题是一个previous question我问一个后续（用不同的捻）：

我不确定如何恰当地描述我的问题：这是一个错误，只需要调试。

这里是我的jsfiddle：http://jsfiddle.net/Wagtail/b6Juh/18/

我需要能够通过项目A，项目B，和C项滚动，而不是仅仅具有完全消失，当我的鼠标离开项目A.这是为什么呢发生？

这里的的JavaScript，HTML和CSS复制为您提供方便代码：

HTML

<table id="headMenu"> 
    <tr> 
     <td id="head1">Item 1</td> 
     <td id="head2">Item 2</td> 
     <td id="head3">Item 3</td> 
    </tr> 
</table> 
<table id="subMenu"> 
    <tr> 
     <td>Dynamic Content!</td> 
    </tr> 
</table>​ 

CSS代码：

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5% 0px 5%%;vertical-align:middle;} 
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;} 
#headMenu td:hover{background:rgb(162,200,240);} 
#subMenu td:hover{background:rgb(210,230,170);}​ 

的JavaScript代码：

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout; 

head1.onmouseover = function(displayMenu) { 
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>'; 
    head1.onmouseout = function(getScroll) { 
     subMenu.onmouseover = function(breakTimeout) { 
      clearTimeout(timeout); 
      subMenu.onmouseout = function(endFunction) { 
       subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>'; 
      }; 
     }; 
     timeout = setTimeout(function() { 
      document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>'; 
     }, a); 
    }; 
}; 

在此先感谢您的任何答案！如果您需要澄清，我会很乐意回复。

Answer 1

当鼠标从其中一个子菜单表格单元移动到另一个时，触发subMenu.onmouseout函数。解决这个问题的一个简单方法是在单元之间添加另一个超时。

我已经更新您的jsfiddle例子来说明我的意思：

http://jsfiddle.net/b6Juh/22/