JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cf">
    <a href="#" id="the_trigger">MENU 1</a>
    <a href="#">MENU 2</a>
    <a href="#">MENU 3</a>
    <a href="#">MENU 4</a>
</div>

<div id="the_pop" class="cf">
    <a href="#">Submenu 1</a>
    <a href="#">Submenu 2</a>
    <a href="#">Submenu 3</a>
</div>

CSS

body {
    background: #fff;
    padding: 40px;
    font-family: arial;
    }

/* clear the floats */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table }
.cf:after { clear: both; }

a {
    position: relative;
    float: left;
    display: block;
    padding: 10px;
    border: 1px solid #000;
    margin: 0 0 -1px -1px;
    text-decoration: none;
    color: #000;
    xbackground: #201a3c;
    background: #c5bcda;
    }
a:hover {
    background: #a59cba;
    }

#the_pop {
    display: none;
    }

JavaScript

$(function(){
    
    $('#the_trigger').on({
        mouseenter: function(){
            $('#the_pop').stop().fadeIn('fast');
        },
        mouseleave: function(){
            //console.log($(e.target));
            $('#the_pop').fadeOut('fast');
        }
    });
    
    $('#the_pop').on({
        mouseenter: function(){
            $(this).stop().css('opacity','1.0');
        },
        mouseleave: function(){
            $(this).fadeOut('fast');
        }
    });
    
    $('a').on('click',function(){ return false; });
    
});