JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainNav">
    <li class="has-sub">Menu 1
        <ul class="sub-menu">
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ul>
    </li>
    <li class="has-sub">Menu 2
        <ul class="sub-menu">
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3</li>
            <li>Sub 4</li>
            <li>Sub 5</li>
        </ul>
    </li>
    <li>Menu 3</li>
</ul>

CSS

*{
    box-sizing: border-box;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainNav > li{
    float: left;
    padding-left: 20px;
    cursor: pointer;
    background: lightblue;
    padding: 10px 20px 10px 20px;
    position: relative;
}
.mainNav > li:hover{
    background: blue;
    color: white;
}
.sub-menu{
    position: absolute;
    top: 38px;
    left: 0;
    width: 100%;
}
.sub-menu > li{
    background: blue;
    color: white;
    padding: 10px 20px 10px 20px;
}

JavaScript

$(".sub-menu").hide();
$( ".has-sub" ).hover(function() {
  $( this ).children(".sub-menu").slideToggle( "fast" );
});