独特的JavaScript/DHTML菜单：Onmouseover/onmouseout脚本逻辑挑战

我正在尝试创建一个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>
    ...

项目1
项目2
项目3
分项A1
分项A2
分项A3
分项B1
分项B2
...

当mouseover上的mainMenu1时，我想要subMenuA.style='visible'。
当主菜单在mouseout上时，我想要subheaderA.style='hidden'。
当mouseout上的subMenuA时，我想要subheaderA.style='hidden'。

请注意，传统的下拉脚本不起作用，因为这两个菜单是两个独立的元素，它们之间的距离很小。因此，有必要“弥合”这两个要素之间的差距。怎么做

有人能推荐一个基本的JavaScript代码来实现这个功能吗？即使只是逻辑/想法也很好。我会非常感激的

最新答案：

最新答复：

---

这是主要的想法，但在菜单关闭之前，我无法将鼠标从item1移动到menu1。布局是关键：）我的问题是如何“弥合”这两个元素之间的差距。实际上，你能把这一点传递给JS本身吗？我正在开发一个谷歌小工具，jQuery似乎不起作用。代码完全是基于DOM的JS，没有jQuery。如果存在变量问题，您可以将

var$

和

$

的所有实例设置为非冲突的，例如

getID

。我明白了。但我真的需要一个在主菜单[1-3]上有超时效果的代码。这是原则上的想法，但我无法在菜单关闭之前将鼠标从item1移到menu1。布局是关键：）我的问题是如何“弥合”这两个元素之间的差距。实际上，你能把这一点传递给JS本身吗？我正在开发一个谷歌小工具，jQuery似乎不起作用。代码完全是基于DOM的JS，没有jQuery。如果存在变量问题，您可以将

var$

和

$

的所有实例设置为非冲突的，例如

getID

。我明白了。但我真的需要一个在主菜单上有超时效果的代码[1-3]。

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;
}