JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul class="nav-menu">
        <li class="parent"> <a href="link1">Parent Link 1</a>

            <ul class="child-menu">
                <li class="child"><a href="test.com">Child Link 1</a>

                    <ul class="grandchild-menu">
                        <li><a href="http://www.google.com">Grandchild Link 1</a>
                        </li>
                        <li><a href="http://www.google.com">Grandchild Link 2</a>

                            <ul class="great-grandchild-menu">
                                <li><a href="http://www.google.com">Great Grandchild Link 1</a>

                                    <ul class="great-great-grandchild-menu">
                                        <li><a href="http://www.google.com">Great-Great Grandchild Link 1</a>
                                        </li>
                                        <li><a href="http://www.google.com">Great-Great Grandchild Link 2</a>
                                        </li>
                                    </ul>
                                    <!-- .great-great-grandchild-menu -->
                                </li>
                                <li><a href="http://www.google.com">Great Grandchild Link 2</a>

                                    <ul class="great-great-grandchild-menu">
                                        <li><a href="http://www.google.com">Great-Great Grandchild Link 1</a>
                                        </li>
                                        <li><a href="http://www.google.com">Great-Great Grandchild Link 2</a>
                                        </li>
                                    </ul>
                                    <!-- .great-great-grandchild-menu -->
                                </li>
                            </ul>
                            <!-- .great-grandchild-menu -->
                        </li>
                    </ul>
                    <!--...

CSS

ul ul {
    display:none;
    position:absolute;
    background:white;
    border:solid #666 1px;
    width:300px;
    margin:0;
    padding:0;
    list-style:none;
    left:40px;
}
ul li.over > ul {
    display:block;
}
ul li li {
    padding:8px 20px;
}
ul li.over {
    position:relative;
}

JavaScript

$('.nav-menu li ul').parent().addClass('expandable');

$('.nav-menu li.expandable > a').click(function (e) {
    e.preventDefault(); // this will stop the click from following the link
    if (!$(this).parent().hasClass('over')) {
        $(this).parent().parent().find('.over').removeClass('over');
        $(this).parent().addClass('over');
    } else {
        $(this).parent().removeClass('over').find('.over').removeClass('over')
    }
});