javascript - 悬停时的 Bootstrap 子菜单

Question

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

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

我检查了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 的 2px 边距从 <a> 移动鼠标时不丢失 :hover 状态到 <ul>

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