JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li class="click-me">
        click me
		<ul class="hidden">
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
			<li>Link 5</li>
			<li>Link 6</li>
		</ul>
	</li>
</ul>

CSS

ul li{
	list-style: none;
}
	.click-me{
		display: inline;
	}
	.hidden{
		display:none;
		background: #333;
		width:150px;
		color:red;
		padding:30px;
	}

JavaScript

$(document).ready(function(){
    var hideOnClick = function() {
        $('body').live('click.momethingUnique', function(e) {
            var target = $(e.target);
            if(target.closest('.hidden').length) {
                return;
            }
            $('.hidden').slideUp();
            $('body').die('click.momethingUnique');
        });
    };
    
    $('.click-me').click(function(e){
        if($(".hidden").is(":hidden")) {
            $('.hidden').slideDown();
            hideOnClick();
            return false;    
        }
    });
    
});