JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
  <li><a href="#">No Chidren</a></li>
  <li><a href="#">With Chilren</a>
      <ul>
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 2</a></li>
      </ul>
  </li>
</ul>

CSS

.navigation { 
 color: green;
}

.navigation > li{ 
 color: red;
}

.navigation>li>a{ 
 color: orange;
}

.navigation li a:hover{ 
 color: black;
}