JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">Нажми меня
    <ul class="button">
        <li><a href="/">gfhgf</a></li>
        <li><a href="/">gfhgf</a></li>
        <li><a href="/">gfhgf</a></li>
        <li><a href="/">gfhgfh</a></li>
        <li><a href="/">gfhgf</a></li>
        <li><a href="/">gfhg</a></li>
        <li><a href="/">gfh</a></li>
        <li><a href="/">gfhg</a>        
        </li>
    </ul>
</div>

CSS

#menu { 
  font-family: Tahoma, Arial, sans-serif;
  background: #000;
  display: inline-block;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}
#menu > ul {
   margin-left: 20px;
   padding: 0;
}
#menu > ul > li > a {
  color: #fff;
}

JavaScript

$(function() {
    
  $('#menu > .button' )
    .hide();
    
  $('#menu').toggle(function() {
	$(this).find('> ul').slideDown();
  }, function() {
  	$(this).find('> ul').slideUp();
  });

});