twitter-bootstrap - Twitter 引导程序和菜单

Question

我将 twitter bootstrap 用于响应式网站。它的好工具。我在当前网站上遇到问题。我需要三级下拉菜单，例如主导航-> 子项-> 子项。

当您将鼠标悬停在产品上时，类似于http://www.bestbuy.com/ 。在 twitter bootstrap 上这可能吗

谢谢

Answer 1

是的，这是可能的。使用引导站点上的示例作为基础，将子菜单添加到现有子菜单。

像这样：

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Even More options</a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">Third level link</a></li>
                    <li><a tabindex="-1" href="#">Third level link</a></li>
                    <li><a tabindex="-1" href="#">Third level link</a></li>
                    <li><a tabindex="-1" href="#">Third level link</a></li>
                    <li><a tabindex="-1" href="#">Third level link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 2

使用class="dropdown-menu sub-menu"来执行此操作。任何级别的嵌套都是可能的。 小提琴样本

学分：Andres Ilich的回答