JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li>
            <a>Item1</a>
        </li>
        <li>
            <a>Item2</a>
            <ul>
                <li><a href="#">item2-1</a></li>
                <li><a href="#">item2-2</a></li>
                <li><a href="#">item2-3</a></li>
            </ul>
        </li>
        <li>
            <a>Item3</a>
            <ul>
                <li><a href="#">item3-1</a></li>
                <li><a href="#">item3-2</a></li>
                <li><a href="#">item3-3</a></li>
            </ul>
        </li>
        <li>
            <a>Item4</a>
        </li>
    </ul>
</div>

CSS

#menu {
    display:block;
    margin:120px auto 20px;
    border:1px solid #222;
    position:relative;
    background-color:#6a6a6a;
    font:16px Tahoma, Sans-serif;
}  
#menu ul {
    padding:0;
    margin:0;
}  
#menu li {
    position:relative;
    float:left;
    list-style-type:none;
}  
#menu ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}  
#menu li a {
    display:block;
    padding:10px 20px;
    border-left:1px solid #999;
    border-right:1px solid #222;
    color:#eee;
    text-decoration:none;
}  
#menu li a:focus {
    outline:none;
    text-decoration:underline;
}  
#menu li:first-child a {
    border-left:none;
}  
#menu li.last a {
    border-right:none;
}  
#menu a span {
    display:block;
    float:right;
    margin-left:5px;
}  
#menu ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    bottom: 40px;
    background:#6a6a6a;
}  
#menu ul ul li {
    float:none;
}  
#menu ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:14px;
}

a:hover {
    cursor: pointer;
}

JavaScript

(function($){

    $("#menu > ul > li:has(ul)").hover(function(e) { 
        $(this).find("ul").stop(true, true)['slide' + (e.type === 'mouseenter' ? 'Down' : 'Up')]();  
            });  
    
})(this.jQuery);