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

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

Twitter Bootstrap 2 提供了一組強大的元件，但本機不支援多級下拉式選單。這個問題引起了 GitHub 社群的關注，導致許多開發人員尋求替代解決方案。

要解決此限制，可以實現以下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對於您的應用程序，您可以創建自定義.sub-menu 類，該類允許您擴展標準下拉清單以包含其他等級。子選單的位置和可見性可以透過 CSS 進行控制。

此解決方案是在 Bootstrap 版本 3 之前創建的，該版本引入了對多層下拉式選單的本機支援。如果您使用的是 Bootstrap 版本 2，此解決方案適合實現類似的功能。但是，對於 Bootstrap 版本 3 及更高版本，不再需要使用此解決方案。

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