JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>A
    <ul>
      <li>subection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subection</li>
    </ul>
  </li>
</ul>

CSS

ul li { background:#ccc; }
ul > li:hover { font-weight:bold; }
ul > li:hover li { font-weight:normal; }