Уникальный JavaScript/DHTML Menu: OnMouseOver/onmouseout логика сценариев проблемы

Question

Я пытаюсь создать меню JavaScript, который будет использовать следующий HTML:

<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 = 'hidden'.
Когда #subMenuA onmouseout, я хочу # subheaderA.style = 'hidden'.

Обратите внимание, что традиционные выпадающие скрипты не работают, потому что два меню представляют собой два отдельных элемента, и между ними небольшое расстояние. Поэтому необходимо «преодолеть разрыв» между этими двумя элементами. Как это сделать?

Может ли кто-нибудь предложить базовый код 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; 
}