如何在 Twitter Bootstrap 2 中建立多層下拉式選單？

Twitter Bootstrap 2 中的多層下拉式選單

可以使用Twitter Bootstrap 2 中的元素建立多層下拉式選單，即使本機不支援此功能.

更新答案（Bootstrap v2.1.1)

Bootstrap 現在在 v2.1.1 中預設支援多層下拉式選單。更新後的樣式表提供了巢狀下拉選單的樣式。

原始答案

最初，Bootstrap 不提供子選單支援。但是，可以透過利用 CSS 和 HTML 來實現自訂解決方案。

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 {
    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 {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

HTML

新增巢狀選單的 .​​sub-menu類別items:

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
• Item 3

此解決方案將巢狀下拉選單放置在父選單項目的右側，並新增一個箭頭來指示可點選的子選單。

以上是如何在 Twitter Bootstrap 2 中建立多層下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！