JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="menu">
    <li>
      <ul class="submenu">
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
      </ul>
    </li>
    <li>
      <ul class="submenu">
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
        <li><a>bbb</a>
        </li>
      </ul>
    </li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
  </ul>
</nav>

CSS

.active{
    color: blue;    
}

JavaScript

$('html').click(function() {
    removeActiveMenuClass();
});

$( '.menu>li, .submenu>li' ).click(function(e) {
    console.log(e.currentTarget);
    e.stopPropagation();
    removeActiveMenuClass();
    $(this).addClass('active');
});

function removeActiveMenuClass(){
    $('.menu li').removeClass('active');
}