JSFiddle - React, Tailwind, and code Playground
HTML
<nav id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Про компанію</span></a></li>
<li class='has-sub'><a href='#'><span>Асортимент продукції</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Корисна інформація</span></a>
<ul>
<li><a href='#'><span>Корисна інформація 1.1</span></a></li>
<li class='last'><a href='#'><span>Корисна інформація 1.2</span></a></li>
<li class='last'><a href='#'><span>Корисна інформація 1.3</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Контакти</span></a></li>
</ul>
</nav>
CSS
a{
color: #000;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
#cssmenu {
text-align: left;
font-size: 10px;
text-transform: uppercase;
float: right;
}
#cssmenu > ul {
list-style-type: none;
padding: 1px;
margin: 0;
background: #72ae44;
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
display: none;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #fff;
-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}
#cssmenu > ul li.has-sub ul li {
display: block;
width: 200px;
}
#cssmenu > ul li.has-sub ul li>a{
color: #777;
}
#cssmenu > ul li.has-sub ul li>a:hover{
color: #fff;
background: #72ae44;
}
/*#cssmenu > ul li.has-sub > a {
background-image: url('../img/caret.png');
background-repeat: no-repeat;
background-position: 90% -95%;
}*/
/*#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
background: #d80041 url('../img/caret.png') no-repeat;
background-position: 90% 195%;
}*/
#cssmenu > ul li a {
display: block;
padding: 9px 15px;
color: #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: #fff;
color: #72ae44;
}
@media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('../img/menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-color: #d80041;
background-position: 95% 135%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul...