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
$(document).ready(function() {
$('li').click(function() {
$('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
$(this).addClass("active"); //aqui adicionamos a class ao item clicado
});
});