Twitter Bootstrap で複数レベルのドロップダウン メニューを作成するには?

Twitter Bootstrap を使用した複数レベルのドロップダウン メニュー

Twitter Bootstrap 2 には、複数レベルのドロップダウン メニューの機能がありません。ただし、この機能を実現するために実装できる回避策があります。

元の回答 (ブートストラップ バージョン 3)

ブートストラップ バージョン 3 以降では、複数レベルのドロップダウン メニューはデフォルトでサポートされています。例については、次のフィドルを参照してください:

http://jsfiddle.net/2Smgv/2858/

元の回答 (ブートストラップ バージョン 2)

Bootstrap の古いバージョンの場合、次の CSS ハックが可能です。適用:

/* CSS code for sub-menu customization */
.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 は、2 レベルのドロップダウン メニューを処理する新しい ".sub-menu" クラスを作成し、それらをメニュー項目の横に配置し、矢印がメニュー項目の左側に表示されるように変更します。サブメニュー グループ。

デモ

ここでこの回避策のデモを表示できます。 [デモリンク]

以上がTwitter Bootstrap で複数レベルのドロップダウン メニューを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。