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/