如何在悬停而不是单击时使 Twitter Bootstrap 菜单下拉列表

我想让我的 Bootstrap 菜单在悬停时自动下拉，而不必单击菜单标题。我还想丢失菜单标题旁边的小箭头。

答案

要使菜单在悬停时自动停止，那么可以使用基本 CSS 实现。您需要将选择器设置为隐藏菜单选项，然后将其设置为在合适的li标签悬停时显示为块。以 twitter bootstrap 页面为例，选择器如下：

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 bootstrap 示例中的箭头，您将使用以下 CSS 选择器和代码：

a.menu:after, .dropdown-toggle:after {
    content: none;
}

如果你进一步研究这些工作的方式而不仅仅是使用我给你的答案，它将对你有利。

感谢 @CocaAkat 指出我们错过了 “>” 子组合器，以防止父菜单上显示子菜单

I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:

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>

Demo

除了 “My Head Hurts”（这很棒）的回答：

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

有两个挥之不去的问题：

单击下拉链接将打开下拉菜单。除非用户点击其他地方，否则它将保持打开状态，或者将其悬停在其上，从而创建一个尴尬的 UI。
下拉链接和下拉菜单之间有 1px 的余量。如果您在下拉菜单和下拉菜单之间缓慢移动，则会导致下拉菜单变为隐藏状态。

（1）的解决方案是从导航链接中删除 “class” 和 “data-toggle” 元素

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

这也使您能够创建指向父页面的链接 - 这是默认实现无法实现的。您可以将 “＃” 替换为您要向用户发送的任何页面。

（2）的解决方案是删除. dropdown 菜单选择器上的 margin-top

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