Question

我目前正在使用Bootstrap的Yamm3 Megamenu导航栏。如果我包含CSS属性以使下拉菜单显示在悬停上，则从列表中选择一项时下拉菜单不会关闭，而是保持打开状态。 Bootstrap下拉菜单应该在选中某个项目时自动关闭，但是当包含“ hover”时，这似乎不会继续执行。

我的HTML：

    <div class="navbar yamm navbar-color navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Yamm Megamenu</a>
            </div>
            <div class="navbar-collapse collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">

                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Classic</a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a tabindex="-1" href="#"> Action </a></li>
                            <li><a tabindex="-1" href="#"> Another action </a></li>
                            <li><a tabindex="-1" href="#"> Something else here </a></li>
                            <li class="divider"></li>
                            <li><a tabindex="-1" href="#"> Separated link </a></li>
                        </ul>
                    </li>
                </ul>
             </div>
           </div>
     </div>

还有我的CSS：

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

.navbar-color{
    background-color: #0072b1;
    border-color: #080808;
    color: #ffffff;
}

/* Dropdown menu expands on hover */

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

我尝试使用

ul.nav li.dropdown > ul.dropdown-menu:active {
    display: none;
}

，但是它只是关闭菜单而不重定向到指定的链接。我觉得可以使用纯CSS（而不是JS或jQuery）完成此操作，但是我不确定该如何处理。任何帮助将不胜感激！

选择时关闭悬停Bootstrap下拉菜单

0 个答案: