JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<ul id="list">
    <li>
        <a href="#">test</a>
         <ul>
            <li>
                <a href="#">test</a>
                <ul>
                    <li>
                        <a href="#">test</a>
                        <ul>
                            <li>
                                <a href="#">test</a>        
                            </li>
                        </ul>        
                    </li>
                </ul>        
            </li>
        </ul>       
    </li>
</ul>

SCSS

ul#list {
    overflow:hidden;
    width: 200px;
}
li {
    position: relative;
    background: rgba(0,0,0,.1);
    margin-right: -50px;
    a {
        display: block;
        width: 100%;
        padding: 0 0 0 15%;
        &:hover {
            background: pink;            
        }
    }

}