獨特的JavaScript/DHTML菜單：的onmouseover /的onmouseout腳本邏輯挑戰

Question

我試圖創建將採用以下HTML一個JavaScript菜單：

<table id="mainMenu"> 
    <tr> 
    <td id="mainMenu1">Item 1</td> 
    <td id="mainMenu2">Item 2</td> 
    <td id="mainMenu3">Item 3</td> 
    </tr> 
</table> 

<table id="subMenuA" style='hidden';> 
    <tr> 
    <td>Subitem A1</td> 
    <td>Subitem A2</td> 
    <td>Subitem A3</td> 
    </tr> 
</table> 
<table id="subMenuB" style='hidden';> 
    <tr> 
    <td>Subitem B1</td> 
    <td>Subitem B2</td> 
    ... 

當＃mainMenu1的onmouseover，我想＃subMenuA.style =」可見'。
當＃mainMenu1 onmouseout，我想＃subheaderA.style ='隱藏'。
當#subMenuA onmouseout時，我想＃subheaderA.style ='隱藏'。

需要注意的是傳統的下拉腳本不工作，因爲這兩個菜單是兩個獨立的要素和它們之間有一個小的距離。因此有必要在這兩個要素之間「縮小差距」。這個怎麼做？？

任何人都可以提出一個基本的JavaScript代碼來使這個工作？即使只是邏輯/想法也會很棒。我真的很感激！

Answer 1

更新答案：http://jsfiddle.net/imsky/zcwJt/4/

var $ = function(el) { 
    return document.getElementById(el) 
}; 

var menu_timer; 

$("item1").onmouseover = function() { 
    window.clearTimeout(menu_timer); 
    $("menu1").style.display = "block"; 
} 

$("menu1").onmouseover = function() { 
    window.clearTimeout(menu_timer); 
} 

$("menu1").onmouseout = function(e) { 
    window.clearTimeout(menu_timer); 
    if (!parent(e.relatedTarget, this)) { 
     var menu = this; 
     menu_timer = window.setTimeout(function() { 
      menu.style.display = "none"; 
     }, 1000) 
    } 
} 

var parent = function(el, p) { 
    if (!el) { 
     return false; 
    } 
    if (el !== p) { 
     while (el.parentNode) { 
      el = el.parentNode; 
      if (el == p) { 
       return true; 
      } 
     } 
    } 
    else { 
     return true; 
    } 
    return false; 
}