即使在悬停之前,子菜单块也始终可见。无法理解缺少的内容: -
**HTML**
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Menu
</a>
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li class="dropdown-submenu">
<a href="#">Item2</a>
<ul class="dropdown-menu" >
<li>
<a href="#">Item2.1</a>
</li>
<li>
<a href="#">Item2.2</a>
</li>
</ul>
</li>
</ul>
</li>
CSS
/* dropdown sub menu support for Bootsrap 3 */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 5px;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
当我悬停主菜单子菜单时,下拉列表始终可见?
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
}
.dropdown-submenu > a:after {
position: absolute;
display: inline-block;
font-size: 14px;
right: 7px;
top: 7px;
font-family: FontAwesome;
height: auto;
content: "\f105";
font-weight: 300;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
我使用的是metronic主题并且包含了所有可能的样式表。
答案 0 :(得分:1)
显然是Bootstrap 3.0及更新don't support nested dropdown menus。
也许值得检查上面链接中的脚本。
为了完整起见,我会在此处添加:
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});