如何在 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中文網其他相關文章！