Question

注意：不要将其标记为重复，因为我只想要不使用其他JS和/或css的解决方案!!

我正在使用Bootstrap 3，我从here知道在Bootstrap 3 RC中删除了.dropdown-submenu

我也检查了this ...我想要类似this的菜单，但没有任何额外的JS！是否有任何想要在我的菜单中获得:hover效果而不添加任何JS如上面的链接？我只想使用纯Bootstrap 3类。

我试过了，但是没有按预期工作!!

                   <ul id="menu" class="nav navbar-nav navbar-right margin-bottom-half-em">
                        <li class="aboutus dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">About Us <span class="caret"></span></a>
                            <ul class="dropdown-menu bg-dark-gray">
                              <li><a href="#" class="overview">Overview</a></li>
                              <li><a href="#" class="ourTeam">Our Team</a></li>
                              <li><a href="#" class="ourMission">Our Missions</a></li>
                            </ul>
                        </li>....

Answer 1

JSFiddle：http://jsfiddle.net/NzvKC/763/

您可以使用:hover和<a>标记上的<ul>来显示下拉列表：

a.dropdown-toggle:hover + ul.dropdown-menu,
ul.dropdown-menu:hover { display: block; }

但是当您将鼠标从.dropdown-menu移动到<a>

时，您必须删除<ul>的2px边距，以免丢失：悬停状态

.dropdown-menu { margin-top: 0; }

悬停时的Bootstrap子菜单

1 个答案: