悬停在引导导航条上使用CSS，如何处理下拉菜单之间的间隙

Hover on Bootstrap Navbar using CSS, how to handle gap between dropdown menu?

本文关键字：处理 何处理 下拉菜单 间隙 之间 导航 CSS 悬停      更新时间：2023-09-26

我按照这个链接[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]如何使twitter引导菜单下拉鼠标悬停，而不是点击

这是一个有点粗糙，但它的工作。在。下拉菜单块上方添加不可见的块

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

您可以通过在子菜单周围添加一个包装器类来修复它，而不使用JS。此外，您必须删除margin-top:20px

相关文章：