引导3下拉菜单无效

Sub menu block is always visible even before the hover. Unable to understand what is missing:-

子菜单块在鼠标悬停前总是可见的。无法理解缺失了什么:-

**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

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;
}

When I hover the main menu submenu block of dropdown is always visible ?

当我悬停在主菜单上时，下拉菜单的子菜单块总是可见的?

.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;
}

I am using a metronic theme and have included its all possible style sheets.

我正在使用一个节拍主题，并包含了所有可能的样式表。

1 个解决方案

#1

Apparently Bootstrap 3.0 and newer don't support nested dropdown menus.

显然，Bootstrap 3.0和更新版本不支持嵌套下拉菜单。

Perhaps it is worth checking the script in the link above.

也许在上面的链接中检查脚本是值得的。

I'll add it here for completeness:

为了完整起见，我在这里补充一下:

$('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');
});

#1