Javascript 开发垂直“UL”菜单

我正在开发UL菜单。 这是一个垂直菜单。此垂直菜单的每个链接都有一个子菜单。 菜单元素有一个onmouseout事件，用于删除子菜单。 我面临的问题是：

当我尝试访问子菜单时，onmouseout事件在我进入子菜单之前被调度。 菜单和子菜单之间有一个空格。我相信，当鼠标到达这个空间时，onmouseout事件被调度。 我能做什么，当鼠标位于菜单和子菜单之间的这个空间时，onmouseout不会被调度

谢谢

---

PS：我无法发布代码

请尝试使用chrome或firebug在inspector中查看元素，并重置所有UL和LI css属性。这将消除间距

---

注意：如果您无法发布代码，请至少发布一些功能相同且存在相同问题的代码。

尝试使用chrome或firebug在inspector中查看元素，并重置所有UL和LI css属性。这将消除间距

---

注意：如果您不能发布代码，至少发布一些功能相同且存在相同问题的代码。

在这种情况下，我要做的是在删除子菜单之前设置一个短的setTimeout，然后在鼠标悬停子菜单时清除该超时。这允许鼠标有足够的时间到达那里，而不会对视觉效果造成太大影响（如果有的话）。

在这种情况下，我要做的是在删除子菜单之前设置一个短的超时，然后在将子菜单鼠标移过时清除该超时。这让鼠标有足够的时间到达那里，而不会对视觉效果造成太大影响。

这就是你应该如何构造HTML，不仅是为了解决你的问题，也是因为它在语义上起作用

<ul>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
</ul>

---

请在

上查看此操作的大致演示这是您应该如何构造HTML的，不仅是为了解决问题，也是因为它在语义上起作用

<ul>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
</ul>

---

请在

上查看此操作的大致演示，这里是一个简单的垂直菜单，使用CSS完成：

#menu {
    width: 100px;
    background: #ddd;
    cursor: default;
}

#menu > li {
    padding: 6px;
    border-bottom: 1px solid gray;
    position: relative;
}

#menu > li:hover ul {
    display: block;
}

#menu ul {
    display: none;
    position: absolute;
    width: 100px;
    left: 100px; top: 0;
    background: #eee;
}

#menu ul > li {
    padding: 6px;
    border-bottom: 1px solid #bbb;
}

#menu ul > li:hover {
    outline: 2px solid red;
}

---

现场演示：

这是一个简单的垂直菜单，用CSS完成：

#menu {
    width: 100px;
    background: #ddd;
    cursor: default;
}

#menu > li {
    padding: 6px;
    border-bottom: 1px solid gray;
    position: relative;
}

#menu > li:hover ul {
    display: block;
}

#menu ul {
    display: none;
    position: absolute;
    width: 100px;
    left: 100px; top: 0;
    background: #eee;
}

#menu ul > li {
    padding: 6px;
    border-bottom: 1px solid #bbb;
}

#menu ul > li:hover {
    outline: 2px solid red;
}

---

现场演示：

您希望子菜单UL位于主菜单LI内。您希望使用mouseenter和mouseleave事件，或者只使用CSS:hover。如果您不能发布代码，请发布一些代表性的代码来重现问题。回答CSS/HTML/JavaScript问题时很难看不到任何东西。为什么不能发布代码？你可以匿名！删除您不想让人们看到的任何内容，这样我们就可以处理一些事情。我希望子菜单位于菜单的右侧，并且菜单的结构需要在菜单和子菜单之间留出一个空间。您希望子菜单UL位于主菜单LI的内部。您希望使用mouseenter和mouseleave事件，或者只使用CSS:hover。如果您不能发布代码，请发布一些代表性的代码来重现问题。回答CSS/HTML/JavaScript问题时很难看不到任何东西。为什么不能发布代码？你可以匿名！删除你不想让人们看到的任何内容，这样我们就可以处理一些事情。我希望子菜单位于菜单的右侧，菜单的结构需要在菜单和子菜单之间留出一个空间。我想通过div创建这个菜单。如果我通过UL创建这个菜单，我必须为每个子菜单链接添加一个settimeout，因为它们有边距底部，这给了我同样的问题。因此，我认为解决方案是为zIndex大于其元素的子菜单创建div容器。我想通过div创建这个菜单。如果我通过UL创建这个菜单，我必须为每个子菜单链接添加一个settimeout，因为它们有边距底部，这给了我同样的问题。因此，我认为解决方案是为zIndex大于其元素的子菜单创建div容器。