css - 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表(How to make Twitter Bootstrap menu dropdown on hover rather than click)

Question

I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title.

(我想让我的Bootstrap菜单在悬停时自动下拉，而不必单击菜单标题。)

I'd also like to lose the little arrows next to the menu titles.

(我还想丢失菜单标题旁边的小箭头。)

  ask by falter translate from so

Answer 1

To get the menu to automatically drop on hover then this can achieved using basic CSS.

(要使菜单在悬停时自动停止，那么可以使用基本CSS实现。)

You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over.

(您需要将选择器设置为隐藏菜单选项，然后将其设置为在合适的li标签悬停时显示为块。)

Taking the example from the twitter bootstrap page, the selector would be as follows:

(以twitter bootstrap页面为例，选择器如下：)

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

However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens).

(但是，如果您使用的是Bootstrap的响应功能，则在折叠的导航栏上（在较小的屏幕上）不需要此功能。)

To avoid this, wrap the code above in a media query:

(要避免这种情况，请将以上代码包装在媒体查询中：)

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

---

To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:

(要隐藏箭头（插入符号），这将以不同的方式完成，具体取决于您使用的是Twitter Bootstrap版本2及更低版本还是版本3：)

Bootstrap 3)

(Bootstrap 3))

To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:

(要删除版本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 & lower)

(Bootstrap 2及更低版本))

To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail.

(要删除版本2中的插入符号，您需要更深入地了解CSS，我建议查看:after伪元素如何更详细地工作。)

To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:

(为了让您开始理解，定位和删除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

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