Adding Form tag to Dropdown list item breaks the ui

Question

I am developing a ASP.NET Core 2.0 web application and chose Materialize front-end library. The problem I am facing is that when I added a nav bar with a drop-down menu I cannot make an HTTP Post request without breaking the UI

The problem is that I cannot use a tag so that the styling is applied.

<!-- Dropdown Trigger -->
<li>
    <a class="dropdown-button" href="#!" data-target="dropdownMenu">Hi, @UserManager.GetUserName(User)<i class="material-icons right">arrow_drop_down</i></a>
</li>
<!-- Dropdown Structure -->
<ul id="dropdownMenu" class="dropdown-content">
    <li>
        <a href="#!">Profile</a>
    </li>
    <li>
        <a href="#!">Settings</a>
    </li>
    <li class="divider"></li>
    <li>
        <form method="post" asp-controller="Account" asp-action="Logout">
            <input type="submit" value="Logout"/>
        </form>
    </li>
</ul>

Any ideas, please? :)

Answer 1

To get the padding you could wrap the form in a span:

<li>
   <span>
      <form method="post" asp-controller="Account" asp-action="Logout">
         <input type="submit" value="Logout">
      </form>
   </span>
</li>

If you require the exact same style as <\a> (hover etc.) you either have to extend li>a css to li>input or simply trigger form with JS:

<li><a href="#" onClick="document.logoutForm.submit()">Logout</a></li>

Then wrap the menu with form:

<form name="logoutForm" method="post" asp-controller="Account" asp-action="Logout">

Last option is to wrap form with <\a>:

<li>
   <a href="#">
      <form method="post" asp-controller="Account" asp-action="Logout">
         <input type="submit" value="Logout" style="background:none;border:none;padding:0;">
      </form>
   </a>
</li>