如何在悬停而不是点击的情况下制作Twitter Bootstrap菜单下拉菜单
我希望我的Bootstrap菜单在悬停时自动下拉，而不必单击菜单标题。 我也想失去菜单标题旁边的小箭头。
我创建了一个基于最新（v2.0.2）Bootstrap框架的悬停下拉菜单，该框架支持多个子菜单，并且认为我会将其发布给未来的用户：
body {
padding-top: 60px;
padding-bottom: 40px;
}
.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;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul> 为了让菜单自动停留在悬停状态，可以使用基本的CSS来实现。 您需要将选择器设置为隐藏菜单选项，然后将其设置为当适当的li标签悬停时显示为块。 以twitter引导页面为例，选择器如下所示：
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
但是，如果您使用Bootstrap的响应功能，则不会希望在折叠的导航栏上（小屏幕上）使用此功能。 为了避免这种情况，请将上面的代码包装在媒体查询中：
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
要隐藏箭头（插入符号），这取决于您使用的是Twitter Bootstrap版本2或更低版本还是版本3：
Bootstrap 3
要在版本3中删除插入符号，只需从.dropdown-toggle锚点元素中删除HTML <b class="caret"></b> ：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2和更低
要在版本2中删除插入符号，您需要对CSS有更深入的了解，并且建议查看:after伪元素如何更详细地工作。 为了让你开始理解，在twitter引导示例中定位并移除箭头，可以使用以下CSS选择器和代码：
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你进一步研究这些工作如何，而不是仅仅使用我给你的答案，它将对你有利。
感谢@CocaAkat指出我们错过了“>”子组合器，以防止子菜单显示在父级悬停上
除了“我的头痛”（这很棒）的回答之外：
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个悬而未决的问题：
（1）的解决方案是从导航链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这也使您能够创建一个链接到您的父页面 - 这是默认实现不可能的。 您可以将“＃”替换为要发送给用户的任何页面。
（2）的解决方案是删除.dropdown菜单选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
上一篇: How to make Twitter Bootstrap menu dropdown on hover rather than click