JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>
    <ul>
        <li>
            <a href="">Base 1</a>
            <ul>
                <li><a href="">Pai 1</a>
                    <ul>
                        <li><a href="">Filho 1</a></li>
                        <li><a href="">Filho 2</a></li>
                        <li><a href="">Filho 3</a></li>
                    </ul>
                </li>
                <li><a href="">Pai 2</a>
                    <ul>
                        <li><a href="">Filho 1</a></li>
                        <li><a href="">Filho 2</a></li>
                    </ul>
                </li>

              </ul>
        </li>

        <li><a href="">Base 2</a></li>
        <li><a href="">Base 3</a></li>
        <li><a href="">Base 4</a></li>
    </ul>
</div>

CSS

#cssmenu ul {
    padding: 0;
    margin: 0;
    width: 100%;
    
    list-style: none;
}

#cssmenu > ul > li {
    display: block;
    padding: 2px;
}

#cssmenu > ul ul {
    display: none;
}

.active {
    display: block !important;
}

JavaScript

$( document ).ready(function() {
  $('#cssmenu > ul > li > a').click(function(event){
      event.preventDefault();
    //Não percebo para que é que isto esta aqui
    //$('#cssmenu li').removeClass('active');

    // Seleciona a primeira tag ul filha do link clicado
    // se esse element não tiver a class active adiciona a mesma
    // se não remove
      $(this).parent().children("ul").toggleClass( "active" );
  });
});