注意:不要将其标记为重复,因为我只想要不使用额外 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>....
最佳答案
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; }
关于javascript - 悬停时的 Bootstrap 子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30476365/