JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='menu'>
    <li><a href='#'>top1</a></li>
    <li><a href='#'>top2...</a>
        <ul>
            <li><a href='#'>sub1</a></li>
            <li><a href='#'>sub2</a></li>
            <li><a href='#'>sub3</a></li>
        </ul>
    </li>
    <li><a href='#'>top3</a></li>
    <li><a href='#'>top4...</a>
        <ul>
            <li><a href='#'>sub1</a></li>
            <li><a href='#'>sub2</a></li>
            <li><a href='#'>sub3</a></li>
        </ul>
    </li>
</ul>

CSS

.menu > li {
    display: inline-block;
    position: relative;
    padding: 8px;
    margin: 2px;
    border: 1px solid cyan;
}

.menu > li > ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}



.menu > li:hover > ul, .menu > li.active > ul {
    display: block;
}

JavaScript

$('.menu li').on('click', function(e) {
    var $target = $(this);
    var $sub = $target.children('ul');
   
    // only if sub and not yet active
    if ($sub.length && ! $target.hasClass('active')) {
        // show sub
        $target.addClass('active');
        // done
        e.stopPropagation();
        return false;
    }
    
    // normal click action triggered here
    alert($target.children('a').text());
    e.stopPropagation();
});

$('html').on('click', function(e) {
    // clear all active menu items
    $('.menu > li.active').removeClass('active'); 
});