如何使用 Twitter Bootstrap 2 建立多層下拉式選單？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-11-28 02:39:15

原創

224 人瀏覽過

How Can I Create Multilevel Dropdown Menus with 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中文網其他相關文章！