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

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

JavaScript

$(document).ready(function() {
    var hidden = true;
    $('.click-me').click(function() {
        if (hidden){
           $('.hidden').slideDown(400, function(){hidden = false;});
        }
    });

    $('html').click(function() {
        if (!hidden) {
            $('.hidden').slideUp();
            hidden=true;
        }
    });

    $('.hidden, .click-me').click(function(event) {
        event.stopPropagation();
    });
});