JSFiddle - React, Tailwind, and code Playground

by Anselmo Cotellessa

HTML

<div id="allSections"><ul id="mainNavig" ><li class=" firstLevel active" ><a href="">Home</a>
<ul>
<li class=" secondLevel " ><a>Alu- und Stahlprodukte </a>
<ul>
<li class=" thirdLevel " ><a href="trapezblech/dach-wand">Trapezbleche</a></li>
<li class=" thirdLevel " ><a href="ziegelbleche/dach">Ziegelbleche</a></li>
</ul>

<li class=" secondLevel " ><a>Kunststoffprodukte</a>
<ul>
<li class=" thirdLevel " ><a href="hohlkammerplatten--stegplatten/dach">Hohlkammerplatten/ Stegplatten</a></li>
<li class=" thirdLevel " ><a href="?id=55">Multifunktionspaneele</a></li>
<li class=" thirdLevel " ><a href="lichtplatten/aus-pvc-mit-herstellergarantie">Lichtplatten</a></li>
</ul>

<li class=" secondLevel " ><a href="Schneefangsysteme/und-zubehoer-fuer-dach">Schneefangsysteme</a></li>
<li class=" secondLevel " ><a href="profilfueller/fuer-dachplatten">Profilfüller</a></li>
<li class=" secondLevel " ><a href="befestigung/schrauben-kalotten">Befestigung</a>
<ul>
<li class=" thirdLevel " ><a href="schrauben/fuer-holz-stahl-unterkonstruktion">Schrauben</a></li>
<li class=" thirdLevel " ><a href="kallotten/fuer-trapezblech">Kalotten</a></li>
<li class=" thirdLevel " ><a href="bohrer/fuer-befestigung">Bohrer</a></li>
</ul>
</ul>

</ul>
<ul id="main" ><li class=" firstLevel " ><a>Anwendungen</a>
<ul>
<li class=" secondLevel " ><a>Anwendungen Alu- und Stahlrodukte</a>
<ul>
<li class=" thirdLevel " ><a>Carport</a>
<ul>
<li class=" fourthLevel " ><a href="trapezblech/dach-wand-2">Carport mit Trapezblech</a></li>
</ul>

<li class=" thirdLevel " ><a href="gartenhaus-schuppen/ziegelprofilblech-trapezblech">Gartenhaus/ Schuppen</a>
<ul>
<li class=" fourthLevel " ><a href="aluminium-trapezblech/dach-wand-2">Dach mit Aluminium Trapezblech</a></li>
<li class=" fourthLevel " ><a href="ziegonal/gartenhaus">Dach mit Ziegelblech</a></li>
</ul>

<li class=" thirdLevel " ><a href="wohnhaus/ziegelprofilblech-ziegonal">Dachsysteme für das Wohnhaus</a></li>
</ul>

<li class=" secondLevel "...

CSS

ul#mainNavig {
    width: 60%;
    clear: both;
    padding: 40px 40px 0 40px;
    margin: 320px 0 0 0;
    z-index: 10000;
}






ul#main {
  width: 59.5%;
    clear: both;
    padding: 40px 40px 0 40px;
    margin: 0;
    z-index: 10000;
}


ul#main .secondLevel, ul#mainNavig .secondLevel {
    width: 80%;
    display: none;
    color: #262626 !important;
    z-index: 10000;
}

   
ul#main .secondLevel li, ul#mainNavig .secondLevel li {
    width: 80%;
    display: none;
    color: #262626;
    z-index: 10000;
} 

ul#main .secondLevel li ul, ul#mainNavig .secondLevel li ul {
    width: 80%;
    display: none;
    color: #262626;
    z-index: 10000;
}
  
   
ul#main > li:hover .secondLevel, ul#mainNavig > li:hover .secondLevel {
display: block;
}

ul#mainNavig >  li:hover .secondLevel:hover li, ul#main > li:hover .secondLevel:hover li {
display: block;
}

ul#mainNavig > li .secondLevel:hover li:hover ul li, ul#main > li .secondLevel:hover li:hover ul li {
display: block;
}