JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>ul > li
    <ul>
      <li>ul > li > ul > li = red background color is negated by applying the same color as in the 'normal' state.</li>
    </ul>
  </li>
  <li>ul > li
    <ul>
      <li>ul > li > ul > li = red background color is negated by applying the same color as in the 'normal' state.</li>
    </ul>
  </li>
  <li>ul > li
    <ul>
      <li>ul > li > ul > li = red background color is negated by applying the same color as in the 'normal' state.</li>
    </ul>
  </li>
</ul>

CSS

ul { padding:10px; }
ul li { background:#ddd; color:#000; padding:1px; }
ul > li:hover { background:red; color:#fff; border:2px solid #000; }
ul > li:hover li { background:#ddd; color:#000; border:none; }