JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<ul id="navi">
 <li><a href="#">Home </a></li>
 <li><a class="titel" href="#kat1">Kategorie 1 </a>
  <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a>
        <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
       </li>
     </ul>
   </li>
  </ul> 
 </li>

 <li><a class="titel"  href="#kat2">Kategorie 2 </a>
 <ul id="knoten_2">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
   <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a></li>
     </ul>
   </li> 
  </ul> 
 </li>

 <li><a class="titel"  href="#kat3">Kategorie 3 </a>
  <ul id="knoten_3">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a></li>
  </ul>
 </li>
</ul>


</div>
</body>



</html>

CSS

ul , li {
 margin:0;
 padding:0;
 list-style:none;
}

ul#navi , ul#navi ul {
 width:9.375em;  /* entspricht einer Breite von 150px (150 / 16 )*/
 float:left;
 background:#333;
}

ul#navi  li  {
 position:relative;
}

ul#navi a {
 display:block;
 padding:5px;
 color:#fff;
 font-weight:bold;
}

ul#navi ul  ,                   /* 1. Ebene verschieben */
ul#navi  li:hover ul ul ,       /* 2. Ebene verschieben */
ul#navi  li:hover  ul ul ul  {  /* 3. Ebene verschieben */
 display:none;
 top:0;
 background:#000;
}

ul#navi li:hover ul ,
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 display:block; /* entspricht 150px */
 }
 
 ul#navi li:hover > a , 
ul#navi  ul li:hover  > a, 
ul#navi ul  ul  li:hover  > a, 
ul#navi ul  ul ul  li:hover  > a  {
  background:#a33;
  color:#fff;
}

/* Diese Angabe soll nur der IE 7 sehen */      
ul#navi li {
  float:left;
   width:100%;
}