开发垂直"UL"菜单

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属性。这将消除空格。

注:如果你不能发布代码，至少发布一些功能相同的代码，并有相同的问题。

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