WMS - Header nav hover

    $('.hover-menu-wrapper').on('mouseover', function() {
        $('.hover-menu').addClass('show')
    })

    $('.hover-menu-wrapper').on('mouseleave', function() {
        $('.hover-menu').removeClass('show')
    })

.navbar {
    .hover-menu-wrapper {
        position: relative;
        .hover-menu {
            position: absolute;
            top: 30px;
            // padding-top: 100px;
            width: 100%;
            background: $white;
            -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
            opacity: 0;
            transition: .4s;
            &.show {
                opacity: 1;
            }

        }
    }
    .nav-hover {

    }
}


<div class="hover-menu">
                        <ul class="list-unstyled">
                            <li>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button class="btn">
                                        <i class="fas fa-sign-out-alt"></i>
                                        <span>Logout</span>
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>


hover-menu-wrapper