JSFiddle - React, Tailwind, and code Playground
HTML
<nav class="navbar">
<ul class="menu">
<li><a href="#">Regulamin</a></li>
<li class="hoverli"><a href="#">Drop Menu</a>
<ul class="submenu">
<li><a href="#">Pierwsza klasa</a></li>
<li><a href="#">Druga klasa</a></li>
<li><a href="#">Trzecia klasa</a></li>
</ul>
</li>
<li class="hoverli"><a href="#">Drop Menu 2</a>
<ul class="submenu">
<li><a href="#">Pierwsza klasa</a></li>
<li><a href="#">Druga klasa</a></li>
<li><a href="#">Trzecia klasa</a></li>
</ul>
</li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Użytkownicy</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Pomoc</a></li>
</ul>
</nav>
CSS
.navbar {
float: left;
margin-left: 25px;
}
.navbar ul {
display: block;
padding-left: 0px;
margin-top: 30px;
}
.navbar ul li {
display: inline;
padding:0px;
margin-left:-3px;
}
.navbar ul li a:link,
.navbar ul li a:visited {
color: #323A45;
padding: 31px 10px;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.navbar ul li a:hover,
.navbar ul li a:active {
background-color: #DDDFE3;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
text-decoration: none;
}
.navbar ul li:hover > ul.submenu {
display:inline;
}
.navbar ul li > ul.submenu {
background: #25B695;
float: none;
position: absolute;
z-index: 11;
margin-top:49px;
display: none;
-webkit-box-shadow: 1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-box-shadow:1px 1px 5px #000;
text-align:left;
}
.navbar ul li > ul.submenu li {
background: none;
display: block;
float: none;
text-shadow: none;
padding: 0;
margin: 0;
}
.navbar ul li > ul.submenu li a:link,
.navbar ul li > ul.submenu li a:visited {
color: #EAECF0;
display: block;
padding: 10px;
min-width: 140px;
border-top: 0;
}
.navbar ul li > ul.submenu li a:hover,
.navbar ul li > ul.submenu li a:active {
background: #079877;
color: #EAECF0;
border-top: 0;
}