Bootstrap4 下拉分级导航设置

 

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand h1" href="#">Logo</a>

    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item" style="margin-top: 10px">
            <a class="nav-link h5" href="#">Link 1</a>
        </li>
        <!-- Dropdown -->
        <li class="nav-item dropdown" style="margin-top: 10px">
            <a class="nav-link dropdown-toggle h5" href="#" id="navbardrop" data-toggle="dropdown">二级下拉菜单
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </li>
        <li class="nav-item dropdown" style="margin-top: 10px">
            <a class="nav-link dropdown-toggle h5" href="#" data-toggle="dropdown">三级下拉菜单
            </a>
            <div class="dropdown-menu">
                <span style="margin-left: 15px; font-weight: bold;">二级菜单1
                        <a class="dropdown-item" href="/About" style="font-size: small">三级菜单1</a>
                    <a class="dropdown-item" href="/Contact" style="font-size: small">三级菜单2</a>
                    <a class="dropdown-item" href="/About" style="font-size: small">三级菜单3</a>
                </span>
                <span style="margin-left: 15px; font-weight: bold;">二级菜单2
                        <a class="dropdown-item" href="/About" style="font-size: small">三级菜单4</a>
                    <a class="dropdown-item" href="/Contact" style="font-size: small">三级菜单5</a>
                    <a class="dropdown-item" href="/About" style="font-size: small">三级菜单6</a>
                </span>
            </div>
        </li>
    </ul>
</nav>

参考：https://www.runoob.com/bootstrap4/bootstrap4-navs.html