JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

    <a href="#">lista</a>


    <div class="menu_wrapper">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li class="has_children">d
            <ul>
                <li >a1</li>
                <li>b1</li>
                <li class="has_children">c1
                    <ul>
                        <li>a2</li>
                        <li>b2</li>
                    </ul>
                </li>
                <li>d1</li>
            </ul>
        </li>
        <li>e</li>
    </ul>

    </div>

</body>
</html>

CSS

li{
    width: 300px;
    background-color: rgb(81, 255, 0);
}

li ul li{
    background-color: rgb(0, 255, 234);
}

li ul li ul li{
    background-color: rgb(0, 60, 255);
}

ul{
    position: absolute;
    top: 0;
    left: 0;
}

.menu_wrapper{
    position: relative;
    background-color: rgb(255, 208, 0);
}

.has_children::after{
content: ">";
}

.mystyle{
    background-color: red;
    left: 500px;
}

JavaScript

var anchors = document.getElementsByTagName("ul");
        var pos = 0;

        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
                anchor.onclick = function() {
                    anchor.classList.toggle("mystyle");
            }
        }