Html 引导中的多级下拉菜单

我已经浏览了几个不同的线程和示例，我所尝试的一切都使我的菜单格式变得非常不稳定。任何关于如何成功使用多级下拉菜单的提示都将不胜感激

基本上，我希望“国家”下拉（就像现在一样），然后我希望一个子菜单“国会”向右方扩展，显示“众议院”和“参议院”

这是我的html：

<div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
        @guest
        @else
        <li class="nav-item">
            <a class="nav-link" href="{{ route('home') }}">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="state">{{ Auth::user()->state->name }} <span class="caret"></span></a>
            <ul class="dropdown-menu" aria-labelledby="state">
                <a class="dropdown-item" href="{{ url("states/" . Auth::user()->state->abbreviation) }}">Statehouse</a>
                <a class="dropdown-item" href="{{ url("/states/" . Auth::user()->state->abbreviation . "/primaries") }}">Primaries</a>
                <a class="dropdown-item" href="{{ url("states/" . Auth::user()->state->abbreviation . "/elections") }}">Elections</a>
            </ul>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="usa">National<span class="caret"></span></a>
            <ul class="dropdown-menu" aria-labelledby="state">
                <a class="dropdown-item" href="{{ route('overview') }}">Overview</a>
                <a class="dropdown-item" href="{{ route('house') }}">House</a>
                <a class="dropdown-item" href="{{ route('senate') }}">Senate</a>
                <a class="dropdown-item" href="{{ route('states') }}">States</a>
                <a class="dropdown-item" href="{{ route('parties') }}">Parties</a>
            </ul>
        </li>
        @if(!is_null(Auth::user()->party_id))
            <li class="nav-item">
                <a class="nav-link" href="{{ url("parties/" . Auth::user()->party_id) }}">Party</a>
            </li>
        @endif
        @endguest
    </ul>
</div>

@客人
@否则










@如果（！为null（Auth:：user（）->参与方id））


@恩迪夫
@终客

尝试查看下面的链接。滚动至页面上的最后一个示例以获得下拉菜单。

---

希望这有帮助

这个问题是关于CSS框架引导（）的。虽然链接中的内容可能会有所帮助，但由于Bootstrap框架中的自定义CSS，它不适用于此问题。此外，避免发布仅链接的答案；如果url更改，此答案将无效。该链接没有描述多级菜单。您看到这些示例了吗？