Twitter Bootstrap 2 で複数レベルのドロップダウン メニューを作成するにはどうすればよいですか?

Twitter Bootstrap 2 によるマルチレベル ドロップダウンの実装

Twitter Bootstrap 2 には、マルチレベル ドロップダウン メニューを作成する機能がネイティブにありません。この制限を克服するために、開発者は追加の CSS 要素と HTML 要素を使用して創造的な回避策を考案しました。

カスタム CSS ソリューション

1 つのアプローチでは、カスタム 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 中国語 Web サイトの他の関連記事を参照してください。