I am building a website using Bulma. The navbar should include at the end a dropdown with a logout button as a last item. For security reasons, the logout must be made using a form. The code is as follows:

<nav class="navbar is-fixed-top">
    <div class="navbar-brand">
        <a class="navbar-item" href="#">
            <strong>
                My project
            </strong>
        </a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div id="navbarMenu" class="navbar-menu">
        <div class="navbar-end">
            <div class="navbar-item has-dropdown">
                <a class="navbar-link">
                    Welcome user
                </a>
                <div class="navbar-dropdown is-right">
                    <a class="navbar-item">
                        About
                    </a>
                    <hr class="navbar-divider">
                    <form action="..." method="post">
                        <button type="submit" class="navbar-item">
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</nav>

However, the navbar-item is made to work only on <a> and <div>... There, I lose the hovering effect on that specific button.

Any suggestions on how I can recover it?