JSFiddle - React, Tailwind, and code Playground
by Kleofáš Hatlapatka
HTML
<nav><ul id="nav">
<li><a href="/">Domů</a></li>
<li class="has_submenu"><a href="http://www.moda4u.cz/40-spodni-pradlo">Spodní prádlo</a><ul><li><a href="http://www.moda4u.cz/41-podprsenky">Podprsenky</a></li><li><a href="http://www.moda4u.cz/42-kalhotky">Kalhotky</a></li><li><a href="http://www.moda4u.cz/44-korzety">Korzety</a></li><li><a href="http://www.moda4u.cz/43-nocni-kosilky">Noční košilky</a></li><li><a href="http://www.moda4u.cz/45-tanga">Tanga</a></li><li><a href="http://www.moda4u.cz/46-pyzama">Pyžama</a></li><li><a href="http://www.moda4u.cz/47-podvazkove-pasy">Podvazkové pásy</a></li><li><a href="http://www.moda4u.cz/48-svatebni-kosilky">Svatební košilky</a></li><li><a href="http://www.moda4u.cz/49-kostymy-dresy">Kostýmy dresy</a></li><li><a href="http://www.moda4u.cz/50-nohavickove-kalhotky">Nohavičkové kalhotky</a></li><li><a href="http://www.moda4u.cz/51-puncochy">Punčochy</a></li><li><a href="http://www.moda4u.cz/52-satenove-zupany">Saténové župany</a></li><li><a href="http://www.moda4u.cz/53-zupany">Župany</a></li><li><a href="http://www.moda4u.cz/54-satenove-kosilky">Saténové košilky</a></li><li><a href="http://www.moda4u.cz/55-satenova-pyzama">Saténová pyžama</a></li><li><a href="http://www.moda4u.cz/56-kosilky--komplety">Košilky - komplety</a></li><li><a href="http://www.moda4u.cz/57-body">Body</a></li><li><a href="http://www.moda4u.cz/58-panske-spodni-pradlo">Pánské spodní prádlo</a></li><li><a href="http://www.moda4u.cz/59-ostatni">Ostatní</a></li><li><a href="http://www.moda4u.cz/60-puncochace">Punčocháče</a></li><li><a href="http://www.moda4u.cz/61-podkolenky">Podkolenky</a></li><li><a href="http://www.moda4u.cz/62-bokove-kalhotky">Bokové kalhotky</a></li><li><a href="http://www.moda4u.cz/63-vyssi-pas">Vyšší pas</a></li><li><a href="http://www.moda4u.cz/64-panska-pyzama">Pánská pyžama</a></li><li><a href="http://www.moda4u.cz/65-stahovaci-pradlo">Stahovací prádlo</a></li><li><a href="http://www.moda4u.cz/66-panske-zupany">Pánské...
CSS
nav
{
display: block;
}
#header {max-width:1200px; margin:0 auto 10px; position:relative; min-height:180px; z-index:200;}
#header #logo {position:absolute; top:20px; left:0; padding:0; width: 33%;}
#header #logo img {max-width: 100%; height: auto; vertical-align: bottom;}
#nav {position:absolute; bottom:0; left:0; right:0; border-bottom:#333 solid 2px;}
#nav > li {font-family:Sanchez, Georgia, Serif; float:left; font-size:18px; font-size:1.8rem; text-transform:uppercase; position:relative;}
#nav > li:hover {z-index: 2;}
#nav > li.has_submenu > a {padding-right:20px; background-image:url("../img/styles/picto_submenu.png"); background-position:right center; background-repeat:no-repeat;}
#nav > li a {display:inline-block; padding:4px 10px;}
#nav > li > a:hover, #nav > li > a:focus, #nav > li:hover > a, #nav > li.sfHoverForce > a {color:#fff; background-color: #333;}
#nav > li.has_submenu > a:hover, #nav > li.has_submenu > a:focus, #nav > li.has_submenu:hover > a, #nav li.has_submenu.sfHoverForce > a {background-image:url("../img/styles/picto_submenu2.png");}
#nav > li > ul {display:none; position:absolute; background:#333; padding:7px 10px; left:0; min-width:172px;}
#nav > li > ul > li {/*border-bottom:#666 solid 1px;*/}
#nav > li > ul > li:last-child {border:none;}
#nav > li > ul ul {padding-left:10px; text-transform:none;}
#nav > li:hover ul {display:block;}
#nav > li ul li {font-family:Verdana, Geneva, sans-serif; color:#fff; font-size:12px; font-size: 1.2rem;}
#nav > li ul li a {color:#ccc; display:block;}
#nav > li ul li a:hover, #nav > li ul li a:focus {color:yellow;}
#nav
{
list-style-type:none;
}
#header p {margin-bottom:0; line-height:normal;}