引导程序中的多级下拉菜单答案

【问题标题】：Multilevel dropdown in bootstrap引导程序中的多级下拉菜单
【发布时间】：2012-09-01 14:08:52
【问题描述】：

我正在尝试基于 twitter bootstrap 制作多级菜单。

这是 HTML：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Twitter Bootstrap Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <body>
        <div class="container">
                <div class="dropdown clearfix">
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                        <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 class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a>
                                    <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">SubSub1</a></li>
                                    <li><a tabindex="-1" href="#">SubSub2</a></li>
                                    </ul>
                                    </li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
            </div>
            </body>

    </html>

直到我将鼠标悬停在“更多选项”上之前，我无法弄清楚为什么子菜单会被隐藏但后来我直接看到了二级菜单。虽然我希望（并且希望）看到它仅在我将鼠标悬停在“Sub with sub”子菜单项上时才会出现。

你有什么建议吗？

【问题讨论】：

标签： css twitter twitter-bootstrap

【解决方案1】：

将下一个代码添加到您的 css 中：

.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }

【讨论】：

【解决方案2】：

显然不可能“开箱即用”；您必须自己进行 CSS 修改。

有关更多信息，请参阅此主题：Twitter Bootstrap Multilevel Dropdown Menu
最佳响应的末尾有一个演示链接，它似乎与您正在等待的内容相对应！

弗洛里安

【讨论】：