动态侧边栏中可折叠导航上方的Bootstrap下拉元素创建多个插入符号

Question

I have a sidebar that's generated from a multidimensional array in the a Laravel config file. One of the nav options has alternative menu options depending on a selection variable in Session.

The Bootstrap dropdown button for changing this variable is supposed to be inside the nav option it controls. However nesting it like this messes up Bootstrap where it adds more following carets on the rows below.

But I don't understand why it's the the two elements are still interfering when they aren't nested anymore.

I found out from researching this problem that Bootstrap doesn't support nested dropdown elements. However if I unnest the dropdown button and put it in front of the entire collapsable nav, it still adds the carets.

I checked for unclosed divs and naming conflict a hundred times, I can't seem get the example nested dropdown solution avaiable on the web, nor the solution for a kinda similar problem here to work.

<nav id="sidebar">
    <div class="sidebar-header">
        <h3>WebStore</h3>
    </div>



    <ul class="list-unstyled components">
        <p>Dummy Heading</p>

        <!-- DROPDOWN SORTING SELECTION-->
        <li class="nav-item">

            <a class="dropdown-toggle" id="dropdown_sorting" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{__('navigation.sorted_by') . ": " . __('navigation.' . $selection)}}</<a>

            @php
                $available_selection = $menus['colonies']; // Should normally be inherited from being nested in SELECTED SUBMENUS
                unset($available_selection['selection']);
                unset($available_selection[$selection]);
            @endphp

            <div class="dropdown-menu" aria-labelledby="dropdown_sorting">

                @foreach ($available_selection as $selection => $value)
                    <button class="dropdown-item" type="button" href="#">{{__('navigation.' . $selection)}}</button>
                @endforeach
            </div>
        </li>

        @foreach ($menus as $menu => $submenus)
            <li class="nav-item active">

                <!-- LIST SINGLE -->
                @if ($submenus == []) 
                    <h3><a href="#{{$menu}}">{{__('navigation.' . $menu)}}</a></h3>

                <!-- LIST WITH SUBMENUS -->
                @else

                    <!-- STANDARD SUBMENUS -->
                    @if ($submenus['selection'] == false)
                        <h3><a href="#menu-{{$menu}}" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{__('navigation.' . $menu)}}</a></h3>

                        <ul class="collapse list-unstyled" id="menu-{{$menu}}">

                            @foreach ($submenus as $key => $value)
                                @if ($value != null)
                                    <li>
                                        <a href="#">{{__('navigation.' . $value)}}</a>
                                    </li>

                                @endif

                            @endforeach
                        </ul>

                    <!-- SELECTED SUBMENUS -->
                    @else
                        @foreach ($submenus as $selection => $submenus)
                            @if ($selection == Session::get('colony_selection'))

                                <h3><a href="#menu-{{$selection}}" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">{{__('navigation.' . $menu)}}</a></h3>
                                <ul class="collapse list-unstyled" id="menu-{{$selection}}">

                                    <!-- LIST SELECTED SUBMENU -->
                                    @foreach ($submenus as $key => $value)
                                        @if ($value != null)
                                            <li>
                                                <a href="#">{{__('navigation.' . $value)}}</a>
                                            </li>
                                        @endif  
                                    @endforeach
                                </ul>

                            @endif
                        @endforeach 
                    @endif

                @endif

            </li>                   
        @endforeach

    </ul>
</nav>

config :

<?php

return [

    'webstore_sidebar' => [

        'colonies' => [

            'selection' => true,

            'region' => [
                'northwestern_europe',
                'eastern_europe',
                'southern_europe',
                'west_asia',
                'southeast_asia',
                'north_america',
                'middle_south_america',
                'northern_africa',
                'middle_south_africa',
                'australia'

            ],
            'difficulty' => [
                'beginner',
                'easy',
                'moderate',
                'hard',
                'expert'

        ],

        'housing' => [

            'selection' => false,

            'nests',
            'outworlds',
            'combinations',
            'parts',
            'substrate',
            'materials'

        ],
        'tools' => [

            'selection' => false,

            'handling',
            'feeding',
            'containers'
        ],

        'food' => [

            'selection' => false,

            'fruitflies',
            'cockroaches',
            'mealworms',
            'materials'

        ],

        'contact' => [],

        'terms' => []
    ],


];