JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<ul id="menu">
<li><a href="#">Physiotherapie</a>
<ul class="klein">
<li><a href="#">Unser Team </a></li>
<li><a href="#">Unsere Leistungen</a></li>
</ul>
</li>
<li><a href="#">Balance-Werkstatt</a>
<ul class="fly_02">
<li><a href="#"><span style="margin-left:20px; font-weight:bold;">Yogakurse</span></a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">Dienstag</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Mittwoch</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Donnerstag</span></a></li>
</ul>
</li>
</ul>
<li><a href="#">Rückenschule</a></li>
<li><a href="#">Reiki</a>
<ul class="fly">
<li><a href="#"><span style="margin-left:25px;">alle Reikitermine im Überblick</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-I-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-II-Seminar</span></a></li>
<li><a href="#"><span style="margin-left:25px;">offene Reikitreffen</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki-Wochenende</span></a></li>
<li><a href="#"><span style="margin-left:25px;">Reiki für Tiere</span></a></li>
</ul>
</li>
<li><a href="#">Autogenes Training</a></li>
<li><a href="#">Kräuterseminar</a></li>
<li><a href="#">Bachblütenberatung</a></li>
<li><a href="#">Ausbildungen</a>
<ul class="klein_02">
<li><a href="#"><span style="margin-left:25px;">Yoga-Übungsleiter</span></a></li>
</ul></li>
<li><a href="#">Dozenten/Kursleiter</a></li>
<li><a href="#">Kursplan</a></li>
<li><a href="#">Kontakt/Impressum</a></li>
</ul>
</div>
CSS
#wrapper {position:absolute; height:500px; width:160px; margin:0; }
/* fuer Internet Explorer erzwingt einen refresh nach :active + ul */
#menu li a,
/* allgemeines Styling */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:250px;}
#menu {padding:10px 0; background:white; border:5px solid brown; bottom:0; }
#menu li {display:inline;}
#menu li {*float:left;} /* entfernt im IE7 die horizontale Luecke zwischen den li */
#menu li a {display:block; width:200px; line-height:30px; background:white; color:black; text-decoration:none; font-family:arial, sans-serif; font-size:13px; text-align:left; font-weight:bold; outline:0; margin-left:10px;}
#menu li:hover > a {background:yellow;}
#menu ul {background:white; height:0; overflow:hidden;}
#menu ul li a {background:white; font-weight:normal; font-size:13px;}
#menu ul li a:hover {background:pink; }
#menu li a:active {background:white;}
#menu li a:active + ul {padding:0 0 0px 0;}
#menu li a:active + ul.fly {height:200px;}
#menu li a:focus {background:white; }
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.fly {height:200px;}
#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.fly:hover {height:200px;}
#menu li a:active + ul.klein {height:50px;}
#menu li a:focus + ul.klein {height:50px;}
#menu li ul.klein:hover {height:50px;}
#menu li a:active + ul.klein_02 {height:30px;}
#menu li a:focus + ul.klein_02 {height:30px;}
#menu li ul.klein_02:hover {height:30px;}
#menu li a:active + ul.fly_02 {height:50px;}
#menu li a:focus + ul.fly_02 {height:50px;}
#menu li ul.fly_02:hover {height:110px;}