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

Question

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

http://www.liveaerosmith.com

＆＃34; 1970年代＆＃34;顶部菜单中的按钮有一个子菜单，但无法点击它，因为它会在光标到达之前消失。

FF和Chrome上的行为相同。

Answer 1

此图片说明了一切：

因此，:hover状态的元素与子ul项之间存在明显差距

你可以在悬停的LI上创建一个透明的:after伪元素，它将连接元素并“填补”这个空白。

或者更确切地说：

.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 */
}