如何实现与引导的方式悬停垂直导航子菜单？

Question

我需要建立与子菜单/部件的在垂直导航。如何创建使用引导4.2.1？

这里是要求：

这里是我的尝试：在不工作的鼠标，只适用的onclick。 （仍然悬停搬出子菜单显示）

HTML：

<ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#page-hero">
                    <i class="fa fa-circle" aria-hidden="true"></i>MyIB
                </a>
            </li>
            <li class="nav-item dropdown-submenu">
                <a class="nav-link" href="#page-hero" data-toggle="collapse" data-target="#submenu1">
                    <i class="fa fa-circle" aria-hidden="true"></i>Store
                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                </a>
                <div class="menu-items " >

                    <div class="menu-point">
                        <div class="menu-wrapper collapse" id="submenu1">
                            <h3>Title goes here</h3>
                            <div class="nested-menu">
                                <div class="sub-menu" >
                                  <a class="dropdown-item" href="#">French</a>
                                  <a class="dropdown-item" href="#">German</a>
                                  <a class="dropdown-item" href="#">Doutch</a>
                                </div>
                                <div class="sub-menu" >
                                  <a class="dropdown-item" href="#">French</a>
                                  <a class="dropdown-item" href="#">German</a>
                                  <a class="dropdown-item" href="#">Doutch</a>
                                </div>
                                <div class="sub-menu" >
                                  <a class="dropdown-item" href="#">French</a>
                                  <a class="dropdown-item" href="#">German</a>
                                  <a class="dropdown-item" href="#">Doutch</a>
                                </div>
                            </div>  
                        </div>  
                    </div>

                </div>
            </li>
       </ul>

Answer 1

你可以试试下面的CSS代码

.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

工作拨弄链接here。