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>
</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').hover(
        function(e){
            $('#the_pop').stop(true,true).fadeIn('fast');
        }, function(e){
            $('#the_pop').delay(300).fadeOut('fast');
        }
    );
    
    $('#the_pop').hover(
        function(e){
            $(this).stop(true,true).css('opacity','1.0');
        }, function(e){
            $(this).delay(300).fadeOut('fast');
        }
    );
    
    $('a').on('click',function(){ return false; });
    
});