JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">QUEM SOMOS</a>
<ul class="sub-menu">
	<li><a href="#">Diretoria</a></li>
	<li><a href="#">Apresentação</a></li>
	<li><a href="#">Atual</a></li>
	<li><a href="#">Histórico</a></li>
	<li><a href="#">Galeria de Presidentes</a></li>
	<li><a href="#">Estatuto</a></li>
	<li><a href="#">Delegados</a></li>
	<li><a href="#">Gestões Anteriores</a></li>
</ul>
</li>
</ul>

CSS

.sub-menu{
    display: none;
}
.active .sub-menu{
	display: block;
}

JavaScript

$(function() {
    $('li').on('click', function() {
        $(this).toggleClass("active");
    });
    
    $('li').on('mouseleave', function() {
        $(this).removeClass("active");
    });
});