Twitter Bootstrap 中的悬停激活下拉菜单

许多用户更喜欢将 Bootstrap 菜单悬停时下拉，从而无需显式点击。本文讨论了悬停功能和删除菜单标题旁边的箭头图标。

悬停激活下拉菜单

要启用悬停时自动下拉菜单，请使用 CSS定位隐藏菜单选项。将以下代码添加到您的 CSS 中：

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

对于响应式设计，请将代码包装在媒体查询中：

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

删除箭头图标

• Bootstrap 3：从.dropdown-toggle锚元素中删除HTML 。
• Bootstrap 2 & Lower: 使用此 CSS 定位并删除箭头选择器:

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

通过合并这些 CSS 修改，您可以实现悬停激活的下拉菜单并消除箭头图标，从而增强用户体验并根据需要自定义 Bootstrap 菜单。