JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>MenĂĽ hoffentlich bald mit Transitions</title>
  </head>
  <body>
<nav><ul>
	<li tabindex="0" style="border:0">Kat 1
  <ul>
    <li tabindex="0">UKat 1.1
    <ul>
      <li>UKat 1.1.1</li>
      <li>UKat 1.1.2</li>
      <li>UKat 1.1.3</li>
    </ul></li>
    <li tabindex="0">UKat 1.2
    <ul>
      <li>UKat 1.2.1</li>
      <li>UKat 1.2.2</li>
      <li>UKat 1.2.3</li>
    </ul></li>
    <li tabindex="0">UKat 1.3
    <ul>
      <li>UKat 1.3.1</li>
      <li>UKat 1.3.2</li>
      <li>UKat 1.3.3</li>
    </ul></li>
  </ul></li>
	<li tabindex="0">Kat 2
  <ul>
    <li tabindex="0">UKat 2.1
    <ul>
      <li>UKat 2.1.1</li>
      <li>UKat 2.1.2</li>
      <li>UKat 2.1.3</li>
    </ul></li>
    <li tabindex="0">UKat 2.2
    <ul>
      <li>UKat 2.2.1</li>
      <li>UKat 2.2.2</li>
      <li>UKat 2.2.3</li>
    </ul></li>
    <li tabindex="0">UKat 2.3
    <ul>
      <li>UKat 2.3.1</li>
      <li>UKat 2.3.2</li>
      <li>UKat 2.3.3</li>
    </ul></li>
  </ul></li>
	<li tabindex="0">Kat 3
  <ul>
    <li tabindex="0">UKat 3.1
    <ul>
      <li>UKat 3.1.1</li>
      <li>UKat 3.1.2</li>
      <li>UKat 3.1.3</li>
    </ul></li>
    <li tabindex="0">UKat 3.2
    <ul>
      <li>UKat 3.2.1</li>
      <li>UKat 3.2.2</li>
      <li>UKat 3.2.3</li>
    </ul></li>
    <li tabindex="0">UKat 3.3
    <ul>
      <li>UKat 3.3.1</li>
      <li>UKat 3.3.2</li>
      <li>UKat 3.3.3</li>
    </ul></li>
  </ul></li>
</ul></nav>
  </body>
</html>

CSS

ul { padding: 0; margin: 0; border: 0; }
      li {
      	width: 10em;
      	min-height: 1em;
        padding: 0.5em 0 0.5em 1em;
        border-top: 1px dotted black;
        list-style: none
      }
      li>ul { height: 0em; overflow: hidden;  }
      li:focus { outline: none; }
      li:focus>ul, li:focus-within>ul, div:focus-within>ul>li:focus>ul {
      	height: auto; overflow: visible; outline: none;
      }