css - 如何在悬停时制作 Twitter Bootstrap 菜单下拉菜单而不是单击

Question

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

Answer 1

要让菜单在悬停时自动下降，这可以使用基本的 CSS 来实现。您需要制定隐藏菜单选项的选择器，然后将其设置为在适当的时候显示为 block 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 中的插入符号，您只需删除 HTML <b class="caret"></b>来自 .dropdown-toggle anchor 元素:

<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 指出我们缺少“>”子组合符以防止子菜单在父悬停时显示