JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><span>Item 1</span>
        <ul>
            <li><span>Sub Item 1</span></li>
            <li><span>Sub Item 2</span></li>
            <li><span>Sub Item 3</span></li>
        </ul>
    </li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span>
        <ul>
            <li><span>Child 1</span></li>
            <li><span>Child 2</span></li>
            <li><span>Child 3</span></li>
        </ul>
    </li>
</ul>

CSS

body {
    font-family: sans-serif;
}
li {
    padding: 4px;
}
li span:hover {
    background: #f7f7f7;
    cursor: pointer;
}