Question

我已经浏览了几个不同的线程和示例，并且我尝试过的所有操作都使菜单的格式变得很奇怪。有关如何成功使多级下拉菜单正常工作的任何提示，将不胜感激。

基本上，我希望“国民”下拉菜单（如当前所做的那样），然后我要使“国会”子菜单向右扩展并显示“众议院”和“参议院”。

这是我的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>

Answer 1

尝试查看下面的链接。滚动到页面上的最后一个示例以获取下拉菜单。 https://www.w3schools.com/Css/css_navbar.asp

希望这会有所帮助！

Bootstrap中的多级下拉菜单

1 个答案: