向 Twitter Bootstrap 子菜单添加间距

Question

我正在尝试在 Twitter Bootstrap 子菜单的左侧添加一些间距，以便在 2 级和 3 级菜单之间有一点间距。因此，我使用了以下添加的 CSS：

.dropdown-submenu > .dropdown-menu {
    margin: -1px 0 0 5px;
}

但是，当用户将鼠标移到间隙上时，子菜单会消失（慢慢来）。如何在鼠标悬停时添加空间并保持菜单显示？

这是一个小提琴：

http://jsfiddle.net/trxk8/5/

Answer 1

这并不是最漂亮的解决方案，但您可以使用透明的 5px 边框填充 .dropdown-submenu 元素。

这样做的副作用是您还必须稍微修剪子锚标记：

CSS

.dropdown-submenu  {
    border-right: transparent block 5px;
    margin-right: -5px;
}

.dropdown-submenu > a {
    position: relative;
    right: 5px;
    margin-left: 5px;
}

工作示例：http://jsfiddle.net/trxk8/8/

注意，您仍将margin-top: -1px 保留在.dropdown-submenu > .dropdown-menu 中