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

Question

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

Answer 1

我基于最新的（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>