JSFiddle - React, Tailwind, and code Playground
by SpiceLab
HTML
<div class="container">
<div id="hauptmenue_e1">
<div class="moduletable">
<ul class="nav menu-e1">
<li class="item-101 firstlvl"><a href="/">Aktuelles</a></li>
<li class="item-123 deeper parent firstlvl">
<a href="/informationen">Informationen</a>
<ul class="nav-child unstyled small">
<li class="item-137 secondlvl">
<a href="/informationen/brandverhuetung-in-gartenhaeusern">Brandverhütung in Gartenhäusern</a>
</li>
<li class="item-138 secondlvl">
<a href="/informationen/karriere-bei-der-feuerwehr">Karriere bei der Feuerwehr</a>
</li>
<li class="item-139 secondlvl">
<a href="/informationen/feuerloescher-richtig-einsetzen">Feuerlöscher richtig einsetzen</a>
</li>
<li class="item-140 secondlvl">
<a href="/informationen/gefahren-im-haushalt">Gefahren im Haushalt</a>
</li>
<li class="item-141 secondlvl">
<a href="/informationen/gefahrloses-grillvergnuegen">Gefahrloses Grillvergnügen</a>
</li>
<li class="item-142 secondlvl">
<a href="/informationen/rauchmelder-sind-lebensretter">Rauchmelder sind Lebensretter</a>
</li>
<li class="item-143 secondlvl">
<a href="/informationen/blaulicht-wie-verhalten-sie-sich-richtig">Blaulicht - Wie verhalten Sie sich richtig?</a>
</li>
<li class="item-144 secondlvl">
<a href="/informationen/der-richtige-notruf">Der richtige Notruf</a>
</li>
</ul>
</li>
<li class="item-125 firstlvl"><a href="/einsaetze">Einsätze</a>
</li>
<li class="item-126 firstlvl"><a href="/fahrzeuge">Fahrzeuge</a>
</li>
<li class="item-128 deeper parent firstlvl">
<a href="/bilder">Bilder</a>
<ul class="nav-child unstyled small">
<li class="item-156 secondlvl">
<a href="/bilder/bilderarchiv-2008">Bilder 2014</a>
</li>
<li class="item-155 secondlvl">
<a href="/bilder/bilderarchiv-2016">Bilderarchiv...CSS
/*********** HAUPTMENUE: EBENE 1 (horizontal) ***********/
.menu-e1 {
padding: 0;
margin: 0;
list-style: none;
display:table;
width: 100%;
height: 50px;
position: relative;
z-index: 999;
padding-bottom: 10px;
background:url("http://picload.org/image/cwliori/schatten.png") left bottom repeat-x;
}
.menu-e1 a {
text-transform: none;
width: 100%;
}
.menu-e1 .firstlvl{
display:table-cell;
vertical-align: middle;
background: #c32127; /* Old browsers */
background: -moz-linear-gradient(top, #c32127 0%, #bb1b21 24%, #9f060c 78%, #970006 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c32127), color-stop(24%,#bb1b21), color-stop(78%,#9f060c), color-stop(100%,#970006)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* IE10+ */
background: linear-gradient(to bottom, #c32127 0%,#bb1b21 24%,#9f060c 78%,#970006 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c32127', endColorstr='#970006',GradientType=0 ); /* IE6-9 */
border-right: 1px solid #790206;
border-left: 1px solid #dc4a4f;
text-align: center;
width: 16.6666667%;
}
.menu-e1 .firstlvl:hover,
.menu-e1 .firstlvl > a:hover,
.menu-e1 .active.firstlvl{
background: #970006; /* Old browsers */
background: -moz-linear-gradient(top, #970006 0%, #8d0005 24%, #6b0004 78%, #620004 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#970006), color-stop(24%,#8d0005), color-stop(78%,#6b0004), color-stop(100%,#620004)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #970006 0%,#8d0005 24%,#6b0004 78%,#620004 100%); /* Chrome10+,Safari5.1+ */
background:...