Dropdown

Been toying around with this for a bit and have had quite a bit of success so far but there's just one problem I personally can't seem to fix.

I'm using bootstrap to create my navbar and everything in it which works fine for the most part, until I come to the point where I am using dropdowns.

What I want it to look like is something like [this](https://i.imgur.com/ulyBksM.png)

But the result I get is [this](https://i.imgur.com/o28zSD3.png)

@model MessePrototyp.Models.MenuItem

<li class="dropdown-submenu">

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

    <ul class="dropdown-menu">
        @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a a class="dropdown-item" asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>


            }


        }
    </ul>
</li>

This line here

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

seems to be the one creating the duplicate of the 'title', I have not yet found a way to fix this though since nobody else seemed to have this problem.