JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
 <li><a>1</a>
   <ul>
     <li><a>1.1</a></li>
     <li><a>1.2</a></li>
     <li><a>1.3</a>
       <ul>
        <li><a>1.3.1</a>
        <li><a>1.3.2</a>
        <li><a>1.3.3</a>
       </ul></li>
   </ul>
 </li>
 <li><a>2</a>
   <ul>
     <li><a>2.1</a></li>
     <li><a>2.2</a></li>
     <li><a>2.3</a></li>
   </ul>
 </li>
</ul>

CSS

li {
  display: block;
  width: 100px;
  background-color: #dedede;
}
body > ul > li:hover > a {
   color: red;
}
ul > li:hover > a:last-child {
   color: red;
}