JSFiddle - React, Tailwind, and code Playground

by basecss

HTML

<ul>
    <li>
        <a href="#">level1</a>
        <i class="close">x</i>
        <ul>
            <li>
                <a href="#">level2</a>
                <i class="close">x</i>
                <ul>
                    <li>
                        <a href="#">level3</a>
                        <i class="close">x</i>
                    </li>
                    <li>
                        <a href="#">level3</a>
                        <i class="close">x</i>
                    </li>
                    <li>
                        <a href="#">level3</a>
                        <i class="close">x</i>
                        <ul>
                            <li><a href="#">level4</a><i class="close">x</i></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">level2</a><i class="close">x</i></li>
            <li><a href="#">level3</a><i class="close">x</i></li>
        </ul>
    </li>
    <li>
        <a href="#">level1</a>
    </li>
</ul>

CSS

li {
    position: relative;
    list-style: none;
    line-height: 28px;
}
li .close {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    line-height: 28px;
    font-style: normal;
    text-align: center;
}
li.over > .close {
    display: block;
}
a {
    position: relative;
    display: block;
    padding-left: 12px;
    padding-right: 28px;
    line-height:28px;
}
a:hover {
    background-color: #ffc;
}
li a:before {
    position: absolute;
    left: 4px;
    top: 11px;
    width:0;
    height:0;
    border-style: solid;
    border-width: 3px;
    border-color: #fff;
    border-radius: 100%;
    content:"";
}
li a:hover:before {
    border-color: #000;
}
li li a:before {
    width: 4px;
    height: 4px;
    border-width: 1px;
}
li li li a:before {
    width:0;
    height:0;
    border-width: 3px;
    border-radius: 0;
}

JavaScript

var items = document.getElementsByTagName('li');
function over(e) {
    e.stopPropagation();
    if(e.target.nodeName.toLowerCase() === 'a') {
        e.target.parentNode.classList.add('over');
    }
}
function out() {
    for(var i = 0; i < items.length; i++) {
    items[i].classList.remove('over');
}
}
for(var i = 0; i < items.length; i++) {
    items[i].onmouseout = out;
    items[i].onmouseover = over;
}