1

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

http://jsfiddle.net/W3Zj8/

这是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”子菜单项上时才会出现。

你有什么建议吗？

4

2 回答 2

2

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

.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }
于 2012-09-01T14:29:18.393 回答
0

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

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

弗洛里安

于 2012-09-01T14:28:42.120 回答