JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown">
    <li class="subMenu">
        Menu item
        <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>        
    </li>
    <li class="subMenu">
        Menu item 2        
        <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>
    </li>
    <li class="subMenu">
        Menu item 3
        <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>
    </li>
    <li class="subMenu">
        Menu item 4        
        <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>        
    </li>    
</ul>

CSS

ul {overflow:hidden;}
ul > li {cursor:pointer;float:left;padding: 3px;margin:0 5px;width:80px;background:#ccc;}
ul ul {display:none}
ul ul li {clear:both;}

JavaScript

$(function(){
    $(document).mousedown(function(){
        $('.dropdown .active').removeClass('active').children('ul').hide();
    })
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
           $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();
        alert('menu item clicked');
    });       
})