JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-menu clearfix">
    <li><a href="index.html">Начало</a></li>
    <li><a href="party.html">Афиша</a></li>
    <li><a href="menu.html">Меню</a>
    <ul class="sub-menu" id="sub-menu">
    <li><a href="restaraunt-menu.html">Ресторан</a></li>
    <li><a href="menu.html">Бар</a></li>
    </ul>
    </li>
    <li><a href="club.html">Клуб</a>
    <ul class="sub-menu">
    <li><a href="#">Терасса</a></li>
    </ul>
    </li>
    <li><a href="/">Корпоративы</a></li>
    <li><a href="contacts.html">Контакты</a></li>
  </ul>

CSS

.main-menu {
display:block;
width:900px;
height:90px;
padding:0px;
text-align:center;
overflow:hidden;
margin:0px auto 0px auto;
}
.main-menu>li {
float:left;
list-style:none;
width:148px;
height:90px;
margin-right:2px;
}
.main-menu li:last-child {
border:none;
width:150px;
margin-right:0px;
}
.main-menu a {
position:relative;
display:block;
height:22px;
text-decoration:none;
padding:35px 0px;
color:rgba(255, 255, 255, 0.9);
background:radial-gradient(circle farthest-side at 73px 47px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);
font-size:15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    transition-duration: 2s;
}
.main-menu a:hover {
background:radial-gradient(circle farthest-side at 76px 47px, rgba(0, 142, 251, 1 ) 15px, rgba(0, 77, 235, 0) 125%);
color:#fff;
}
.main-menu .sub-menu{
position:absolute;
opacity: 0;
visibility: hidden;
margin:0px;
padding:0px;
text-align:center;
    transition-duration: 0.5s;
}
.main-menu .sub-menu li{
list-style:none;
width:148px;
height:40px;
    margin-bottom:2px;
}
.main-menu .sub-menu a{
display:block;
height:20px;
text-decoration:none;
padding:10px 0px;
color:rgba(255, 255, 255, 0.9);
background:radial-gradient(circle farthest-side at 73px 20px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);
font-size:15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.main-menu > li:hover .sub-menu{
    opacity: 1;
    visibility: visible;
    transition-duration: 0.5s;
}
.main-menu .sub-menu a:hover{
background:radial-gradient(circle farthest-side at 76px 47px, rgba(0, 142, 251, 1 ) 15px, rgba(0, 77, 235, 0) 125%); 
color:#fff;
}