Question

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

当我尝试访问子菜单时，会在进入子菜单之前调度onmouseout事件。菜单和子菜单之间有一个空格（边距）。我相信，当鼠标到达此空间时，会调度“onmouseout”事件。我该怎么办，所以当鼠标位于菜单和子菜单之间的“空格”上时，不会调度“onmouseout”？

感谢。

PS：我无法发布代码

Answer 1

在这种情况下我做的是在删除子菜单之前使用短setTimeout，然后在子菜单被鼠标移除时清除该超时。这样可以让鼠标有足够的时间到达那里，而不会影响视觉效果，如果有的话。

Answer 2

这是一个在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;
}

现场演示： http://jsfiddle.net/3xguj/show/

Answer 3

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

P.S。如果您不能发布代码，至少发布一些功能相同并且具有相同问题的代码。

Answer 4

这就是你应该如何构建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进行测试，例如：

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

在JS Fiddle

上查看此操作的粗略演示

开发垂直“UL”菜单

4 个答案: