超级菜单 - 无法在悬停

Question

我正在将一个非常令人惊叹的引导大型菜单调整为完全响应的版本。我希望保持菜单的外观和感觉，因为它非常引人注目，但菜单目前使用Bootstrap的下拉菜单功能，这意味着用户必须单击以显示菜单。在我看来，这不是桌面上的良好用户体验，因为许多人都希望在悬停时出现菜单。因此，我使用以下代码调整了菜单，以确保当用户将鼠标悬停在桌面上的元素上时，会显示mega菜单的子元素：

@media only screen and (min-width: 992px){
    .mega-dropdown:hover .mega-dropdown-menu{
        display: block;
    }
} 

这很棒，并且实现了在桌面上悬停显示菜单所需的效果，但是当我移动鼠标选择菜单项时，菜单消失。我相信这是因为触发子菜单的链接和子菜单顶部之间存在差距。

有什么方法可以让菜单保持打开足够长的时间让用户只使用HTML和CSS进入子菜单？我知道我可以很容易地使用Javascript，但在我看来，Javascript应该谨慎使用，只有在真正需要时才使用。

可以在此Codepen中找到完整代码：

http://codepen.io/JasonEspin/pen/zGqoBa

Answer 1

您需要移除上边距并将其替换为您可以实际覆盖的内容，如透明边框。

.navbar-nav>li>.dropdown-menu {
  margin-top: 0; /* remove applied top margin */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 20px solid transparent;
}

注意：如果这是所有宽度所需要的话，我还没有在其他宽度测试过这个测试。

Codepen Demo

Answer 2

在您的菜单中加入隐形填充，将菜单连接到下拉菜单，有效地使差距成为视觉效果。

并确保你有css说当你徘徊在mega菜单时它保持打开状态。

这样当你的鼠标向下移动它不会死的空白区域时。