JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id="sidebar">
    
<ul>
  <li>
     <h2>Menü</h2>
        <ul>
          <li><a href="index.html">Home</a>

            <li><img src="images/list.png" width="11" height="12" border="0" alt=""> &nbsp;Der Verein
             <ul>
              <li><a href="#" class="active">Vorstand</a></li>
              <li><a href="#">Satzung</a></li>
              <li><a href="#">Mitgliedschaft</a></li>
             </ul>
            </li>

            <li><img src="images/list.png" width="11" height="12" border="0" alt=""> &nbsp;Das Team
             <ul>
              <li><a href="#">Reitlehrer</a></li>
              <li><a href="#">Stallmeister</a></li>
             </ul>
            </li>
       </ul>
  </li>
</ul>

</div>

CSS

#sidebar {
       float: left;
    width: 200px;
    padding: 6px 0 0 0;
}

#sidebar ul {
       list-style: none;
       margin: 0;
       padding: 0;
       color: #201f1c;
}

#sidebar h2 {
       display: block;
       color: #3a5909;
       font-size: 15px;line-height: 18px;
       font-style: italic;
       font-family: georgia,arial,helvetica, tahoma, verdana, sans-seriv;
       border-bottom:solid 1px #3a5909
}

#sidebar a {
       text-decoration: none;
       display: block;
       color: #201f1c;
       padding: 2px 0 0px 20px;
       background: url(images/list.png) center left no-repeat;
}

#sidebar a:hover, #sidebar li .current {
    color: #537c11;
    text-decoration: none;
        font-weight: bold;
        background: url(images/lista.png) center left no-repeat;
}

#sidebar li {
       padding: 0px 0 5px 15px;
    
}

#sidebar ul ul ul {
       padding: 0px 0 5px 10px;
}

div#sidebar ul ul ul {
       display: none;
}

div#sidebar ul ul li:hover ul {
       display: block;
}

/* Submenü erste Ebene einblendet wenn aktiv - funktioniert nicht */

div#sidebar ul ul .active ul {
       display: block;
}

/* Aktives Submenü eingeblendet lassen wenn Hover auf sich selbst - funktioniert nicht*/

div#sidebar ul ul .active:hover ul { 
    display: block;
}


div#sidebar ul ul li:hover ul ul {
       display: none;
}


div#sidebar ul ul ul li:hover ul {
       display: block;         
}