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

css CSS

神乐Jim

2020-03-13

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

第1558篇《如何在悬停而不是单击时使Twitter Bootstrap菜单下拉菜单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答

神乐Pro 2020.03.13

This works for WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

小胖LEY西门 2020.03.13

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;
    }
}

卡卡西神奇 2020.03.13

如果下拉菜单和插入符号小于平板电脑，则应该隐藏下拉菜单和插入符号。

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

猪猪阿飞 2020.03.13

这将隐藏起来

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

阿飞蛋蛋 2020.03.13

还添加了margin-top：0来重置.dropdown-menu的引导CSS边距，因此当用户从下拉菜单缓慢移至菜单列表时，菜单列表不会消失。

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

.nav .dropdown-menu {
    margin-top: 0;
}

Green老丝Itachi 2020.03.13

这可能是一个愚蠢的主意，但是只要删除指向下方的箭头，您可以删除

<b class="caret"></b>

但是，这对于向上的指针没有任何作用。

猪猪西门 2020.03.13

这为我工作：

.dropdown:hover .dropdown-menu {
    display: block;
}

null 2020.03.13

只是想添加一下，如果您有多个下拉菜单（就像我一样），您应该写：

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

而且它将正常工作。

Tony凯 2020.03.13

这是Bootstrap 3内置的。只需将其添加到CSS中即可：

.dropdown:hover .dropdown-menu {
display: block;
}

十三SamJim 2020.03.13

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

演示版

斯丁A 2020.03.13

除了“我的头疼”的答案（很棒）之外：

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;
}

Pro番长 2020.03.13

要使菜单自动悬停，可以使用基本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

小小仲羽 2020.03.13

只需用三行代码自定义CSS样式

.dropdown:hover .dropdown-menu {
   display: block;
}

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android