JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative">
    <ul>
      <li><a>Root</a>
      <ul>
        <li><div>A</div>
        <ul>
          <li><div>AA</div></li>
          <li><div>AB</div></li>
        </ul>
        </li>
        <li><div>B</div>
        <ul>
          <li><div>BA</div></li>
          <li><div>BB</div></li>
        </ul>
        </li>
      </li>
    </ul>
  </div>

CSS

ul { list-style: none; padding: 0; margin:0 }
      li { margin:0; padding: 0;}
      li > div:hover { background-color: #eee}

li div{padding-left:20px}
li li div{padding-left:40px}
li li li div{padding-left:60px}