如何在 Twitter Bootstrap 中创建悬停激活的下拉菜单？

Twitter Bootstrap 的悬停下拉菜单

使用 Twitter 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;
  }
}

用于隐藏导航箭头的 CSS

Bootstrap 3：

删除 HTML 来自 .dropdown-toggle 锚点

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a>

Bootstrap 2 及更低版本：

使用此 CSS 选择器和代码定位并删除箭头：

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

理解这些 CSS 元素的工作原理将增强您自定义 Bootstrap 菜单以满足您的特定需求的能力。

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