JSFiddle - React, Tailwind, and code Playground

HTML

<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#">CAT A</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT B</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT C</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

CSS

li + .lev2 {
  display: none;
}

li:focus-within + .lev2 {
  display: block;
}