JSFiddle - React, Tailwind, and code Playground
HTML
<section class="main-menu">
<div class="container .clearfix">
<div class="row">
<div class="col-lg-10 col-xs-12 col-lg-offset-1">
<ul class="menu">
<li><a href="#" data-hover="О компании">О компании</a>
<ul class="drop">
<li><a href="">Новости</a></li>
<li><a href="">Реквизиты</a></li>
<li><a href="">Документы</a></li>
</ul>
</li>
<li><a href="#" data-hover="Интернет и ТВ">Интернет и ТВ</a></li>
<li><a href="#" data-hover="Видеонбалюдение">Видеонбалюдение</a></li>
<li><a href="#" data-hover="Проекты">Проекты</a></li>
<li><a href="#" data-hover="Контакты">Контакты</a></li>
<li class="shop"><a href="#" data-hover="Интернет магазин">Интернет магазин</a></li>
</ul>
</div>
</div>
</div>
</section>
CSS
.main-menu {
margin-top: 3em;
display: block;
text-align: center;
}
.menu {
z-index: 99;
font-size: 0.85em;
margin: 0 auto;
padding: 0;
text-transform: uppercase;
user-select: none;
letter-spacing: 0.05em;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
height: 2.75em;
position: relative;
}
.menu * {
box-sizing: border-box;
}
.menu li {
display: inline-block;
list-style: outside none none;
margin: 0.7em 1em;
position: relative;
}
.menu a {
padding: 0.7em 0;
color: #adb0b3;
position: relative;
text-decoration: none;
}
.menu a:before,
.menu a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu a:before {
bottom: 0;
height: 3px;
width: 0%;
content: "";
background-color: #53e4d2;
}
.menu a:after {
left: 0;
top: 0;
padding: 0.7em 0;
position: absolute;
content: attr(data-hover);
color: #124d46;
white-space: nowrap;
max-width: 0%;
overflow: hidden;
}
.menu a:hover:before,
.menu:before {
opacity: 1;
width: 100%;
}
.menu a:hover:after,
.menu .shop a:after {
max-width: 100%;
}
.shop a:after {
color: #3cab9d;
}
.drop {
z-index: 2;
background-color: #fff;
overflow: hidden;
list-style: none;
position: absolute;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
padding: 0.2em 0.5em;
left: -1.5em;
text-align: left;
font-size: 1em;
width: 5em;
top: 2em;
opacity: 0;
transition: all .25s linear;
transform: translateY(-2em);
visibility: hidden;
}
.drop > li ul.drop {
display: block;
color: #124d46;
text-transform: none;
}
.drop li > a {
display: block;
float: left;
width: 10em;
position: relative;
}
.menu > li:hover > ul.drop {
opacity: 1;
display: block;
transform: translateY(0px);
transition: all .25s linear;
visibility: visible;
width: 10em;
}