JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
    <li class="submenu"><a href="">Submenu</a>
         <ul>
            <li><a href="">Item</a></li>
            <li><a href="">Item</a></li>
            <li><a href="">Item</a></li>
            <li class="submenu parents-hide">
                <a href="">Submenu</a>
                <ul>
                    <li><a href="">Item</a></li>
                    <li><a href="">Item</a></li>
                    <li><a href="">Item</a></li>
                    <li class="submenu">
                        <a href="">Submenu</a>
                        <ul>
                            <li><a href="">Item</a></li>
                            <li><a href="">Item</a></li>
                            <li><a href="">Item</a></li>
                            <li><a href="">Item</a></li>
                        </ul>
                    </li>
                </ul> 
            </li>
        </ul>
    </li>
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
</ul>

CSS

ul.navigation{
    padding:0;
    margin:0;
    list-style:none;
}
ul.navigation li a{
    display:block;
    background-color:blue;
    margin-bottom:1px;
    color:#fff;
}
ul.navigation li a:hover{
    background-color:red;
}
/* Dropdown */
.navigation > li a{
    background-color:yellow;
}
.navigation > li ul{
    display:none;
}

JavaScript

/*$('.navigation li').hover(function(e){
    e.preventDefault();
    $(this).children('ul').toggle();
});*/
    
    var clicks = 0;

    $(".submenu").click(function(e){
        var $this = $(this);
        e.preventDefault();
        console.log($this);
        var colors = ['red', 'green', 'black', 'yellow', 'orange'];
        $(this).css({'background':colors[clicks]});
        clicks++;
        if(clicks == 5) clicks = 0;
        if($this.hasClass('showing-children'))
            console.log('should hide');
            //$this.children('ul').hide();    
        else
            $this.children('ul').show();
        
        $this.toggleClass('showing-children');
    });

/*
if(children has parent){
    hide            
}
*/