如何在 Bootstrap 中创建悬停激活的下拉菜单并删除箭头图标？

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

删除箭头图标

• 引导 3： 删除 HTML 来自 .dropdown-toggle 锚元素。
• Bootstrap 2 及下部： 使用此 CSS 选择器定位并删除箭头：

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

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

以上是如何在 Bootstrap 中创建悬停激活的下拉菜单并删除箭头图标？的详细内容。更多信息请关注PHP中文网其他相关文章！