下拉子菜单在鼠标光标到达之前消失

Question

我今天的第二个问题。我似乎没有找到为什么在我用鼠标光标到达下拉列表之前它就消失的答案。

http://www.liveaerosmith.com

顶部菜单中的“1970s”按钮有一个子菜单，但无法点击，因为它在光标到达之前就消失了。

FF 和 Chrome 上的相同行为。

Answer 1

这张图片说明了一切：

因此 :hover 状态的元素与子 ul 项

之间存在明显的差距

您可以在悬停的 LI 上创建一个透明的 :after 伪元素，它将连接元素和 "fill" 间隙。

或者以正确的方式进行：

.site-bar {
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    /*padding: 13px 0;                  REMOVE THIS */
    z-index: 10000000;
}

.navigation > li > a {
    margin-right: 30px;
    padding: 13px 0;                   /* ADD THIS */
}

.navigation li:hover > ul, .navigation .sfHover > ul {
    top: 44px;                         /* INSTEAD OF 34px */
}

下拉子菜单在鼠标光标到达之前消失

Dropdown submenu disappears before mouse cursor reaches it

css

submenu

drop-down-menu