JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="bla">Start</a>

        </li>
        <li><a href="bla">Link 1</a>

        </li>
        <li><a href="#">Category 1</a>

            <ul>
                <li><a href="bla">Category 1, Link 1</a>

                </li>
                <li><a href="#">Category 1.1</a>

                    <ul>
                        <li><a href="bla">Category 1.1.1, Link 1</a>

                        </li>
                        <li><a href="bla">Category 1.1.2, Link 2</a>

                        </li>
                        <li><a href="bla">Category 1.1.3, Link 3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Category 2</a>

            <ul>
                <li><a href="bla">Category 2, Link 1</a>

                    <ul>
                        <li><a href="bla">Category 2, Link 1</a>

                        </li>
                        <li><a href="bla">Category 2, Link 2</a>

                        </li>
                        <li><a href="bla">Category 2, Link 3</a>

                        </li>
                    </ul>
                </li>
                <li><a href="bla">Category 2, Link 2</a>

                </li>
                <li><a href="bla">Category 2, Link 3</a>

                </li>
            </ul>
        </li>
        <li><a href="bla">Link 3</a>

        </li>
        <li><a href="bla">Link 4</a>

        </li>
    </ul>
</nav>

CSS

nav ul ul {
    display:none;
}

JavaScript

$(function () {
    $('nav > ul > li a').click(function (e) {
         e.preventDefault();
        e.stopPropagation();
        var $parentli = $(this).closest('li');
        $parentli.siblings('li').find('ul:visible').hide();
        $parentli.find('> ul').stop().toggle();
    });

});
$(document).click(function() {
    $("nav ul li ul").hide();
});