Bootstrap4

Bootstrap4的navbar导航栏支持二级菜单，二级菜单Dropdown默认为单击展开，其实我们更习惯鼠标悬停展开子菜单。看到不少小伙伴使用修改源码jq或另外写jq实现。这里推荐一种最简单的方法。

css：

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

Dropdown的二级菜单还有个小bug，菜单和二级菜单之间有个小空袭，加个mt-0样式就可以了。

html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
                <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </li>
        </ul>
    </div>
</nav>