如何在 Twitter Bootstrap 2 中创建多级下拉菜单？

Twitter Bootstrap 2 的多级下拉菜单

使用 Twitter Bootstrap 2 中的元素创建多级下拉菜单需要自定义实现。

原始回复v2.1.1 之前的

Bootstrap 2 本身不支持多级下拉菜单。为了实现这一点，您可以使用额外的 CSS 将子菜单下拉菜单定位到父菜单项旁边。

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
  display: block;
}

.navbar .sub-menu:before {
  /* Styling for the arrow pointer */
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  /* Additional styling for the arrow pointer */
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

更新的响应 v2.1.1 及更高版本

对于 Bootstrap 2.1.1及以上版本，默认包含多级下拉菜单。只需遵循文档中的指南即可：

[Bootstrap 多级下拉文档](https://getbootstrap.com/docs/2.3.2/components/#dropdowns)

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