我想让我的Bootstrap菜单在悬停时自动下拉，而不是必须单击菜单标题。我也想丢掉菜单标题旁边的小箭头。
如何在悬停而不是单击时使Twitter Bootstrap菜单下拉菜单
The very simple solution for version 2, only CSS. Keeps the same friendly functionality for mobile and tablet.
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
如果下拉菜单和插入符号小于平板电脑，则应该隐藏下拉菜单和插入符号。
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
这将隐藏起来
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
还添加了margin-top：0来重置.dropdown-menu的引导CSS边距，因此当用户从下拉菜单缓慢移至菜单列表时，菜单列表不会消失。
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
这可能是一个愚蠢的主意，但是只要删除指向下方的箭头，您可以删除
<b class="caret"></b>
但是，这对于向上的指针没有任何作用。
这为我工作：
.dropdown:hover .dropdown-menu {
display: block;
}
只是想添加一下，如果您有多个下拉菜单（就像我一样），您应该写：
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
而且它将正常工作。
这是Bootstrap 3内置的。只需将其添加到CSS中即可：
.dropdown:hover .dropdown-menu {
display: block;
}
我基于最新的（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>除了“我的头疼”的答案（很棒）之外：
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个长期存在的问题：
- 单击下拉链接将打开下拉菜单。除非用户单击其他位置或将鼠标悬停在其上以创建笨拙的UI，否则它将保持打开状态。
- 下拉链接和下拉菜单之间有1px的边距。如果您在下拉菜单和下拉菜单之间缓慢移动，则会导致下拉菜单隐藏。
（1）的解决方案是从导航链接中删除“类”和“数据切换”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这也使您能够创建到父页面的链接-使用默认实现是不可能的。您可以将“＃”替换为要发送给用户的任何页面。
（2）的解决方案是删除.dropdown-menu选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
要使菜单自动悬停，可以使用基本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：
引导程序3
要删除版本3中的插入符号，您只需<b class="caret"></b>要从.dropdown-toggleanchor元素中删除HTML ：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2及更低
要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议您:after更详细地了解伪元素的工作方式。为了使您开始理解，定位并删除twitter bootstrap示例中的箭头，可以使用以下CSS选择器和代码：
a.menu:after, .dropdown-toggle:after {
content: none;
}
It will work in your favour if you look further into how these work and not just use the answers that I have given you.
Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover
只需用三行代码自定义CSS样式
.dropdown:hover .dropdown-menu {
display: block;
}
This works for WordPress Bootstrap: