如何使用 Twitter Bootstrap 2 建立多層下拉式選單？

使用 Twitter Bootstrap 2 實現多層下拉式選單

Twitter Bootstrap 2 本身缺乏建立多層下拉式選單的功能。為了克服這個限制，開發人員使用額外的 CSS 和 HTML 元素設計了創意的解決方法。

自訂CSS 解決方案

一種方法涉及添加自訂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;
}

此CSS將子選單定位到與其父選單項目相鄰的位置，併計算它們的尺寸和位置

注意：此方法在Bootstrap 3 中已棄用，在更高版本中不再需要。

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