javascript - 使用 CSS 将鼠标悬停在 Bootstrap Navbar 上，如何处理下拉菜单之间的间隙？

Question

我点击此链接 [1] 在鼠标悬停时打开我的下拉菜单，基本上我添加了

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

工作正常，但问题是如果我希望下拉菜单在菜单项之间有一些垂直间隙怎么办？

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 20px !important;
}

问题是当鼠标离开菜单项时，下拉菜单将被手动关闭。我想这只能由 JS 延迟完成？

示例:http://jsfiddle.net/2Smgv/5438/

[1] How to make twitter bootstrap menu dropdown on hover rather than click

Answer 1

虽然有点老套，但确实有效。在 .dropdown-menu block 上方添加不可见 block

.dropdown-menu:before {
    content: " ";
    display: block;
    position: absolute;
    height: 25px;
    top: -25px;
    left: 0;
    right: 0;
}

这里是 demo