Question

我已经设置了一个导航栏，其中包含一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），它运行正常。

问题是它有效onClick，而我更喜欢onHover。

有没有内置方法可以做到这一点？

我试过这个

.dropdown:hover .dropdown-menu
{
   display: block;
}

这个工作精细菜单会在鼠标悬停时打开，但问题是当我们点击任何菜单项时它不会关闭菜单会保持打开，菜单应该在我们点击任何菜单项后关闭。

Answer 1

从this问题回答，可能是重复的

<强> CSS：

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

Demo

或者

只需使用此插件Bootstrap: Dropdown on Hover Plugin

即可

在bootstrap3.0中鼠标悬停时修复打开菜单后，当我们点击menuitem时菜单没有关闭它仍保持打开状态

1 个答案:

或者