JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li><a href="#">Main1</a></li>
  <li><a href="#">Main2</a></li>
  <li><a href="#">Main3</a>
    <ol>
        <li><a href="#">Sub1</a></li>
        <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub3</a></li>
    </ol>
  </li>

  <li><a href="#">Main4</a></li>
  <li><a href="#">Main5</a></li>
  <li><a href="#">Main6</a></li>
</ol>

CSS

a:hover {
  color: red;
}

li {padding:2px;
    margin:3px;
    border: 3px double green;
}

/* sets the background color of all list items to light green on hover */
li:hover {background-color:#CFC;}

li li {border:1px solid blue;}

/* sets the background color of all list items that are children of other list items to light blue on hover */
li li:hover {background-color:#CCF;}