JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contmenufon">
<ul class="sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-stack">
<li><a href="" title="">Мобильные</a></li>
<li><a href="" title="">Железо</a></li>
<li aria-haspopup="true">
<a href="#" title="MMORPG игры, новости, рейтинг">MMORPG</a>
<div class="grid-container9">
<div class="grid-column grid-column2">
<ul>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
</ul>
</div></div></li>

<li aria-haspopup="true">
<a href="#" title="Одиночные игры, новости, рейтинг">Одиночные</a>
<div class="grid-container9">
<div class="grid-column grid-column2">
<ul>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a href="#">Тестовый элемент</a></li>
<li><a...

CSS

.contmenufon{
height:80px;
line-height:80px;
margin-top: 40px;
background-color:#3B516B;
}

.sky-mega-menu,
.sky-mega-menu * {
margin: 0;
padding: 0;
outline: none;
border: 0;
background: none;
}

.sky-mega-menu {
margin-top: 20px;
position: relative;
z-index: 999;
font-size: 0;
line-height: 0;
text-align: right;
}
.sky-mega-menu:after {
content: '';
display: table;
clear: both;
}
.sky-mega-menu li {
position: relative;
display: inline-block;
float: left;
font-size: 12px;
line-height: 40px;
text-align: left;
white-space: nowrap;
text-transform: uppercase;
}
.sky-mega-menu li a {
display: block;
padding: 0 20px;
text-decoration: none;
color: #ffffff;
transition: background 0.4s, color 0.4s;
-o-transition: background 0.4s, color 0.4s;
-ms-transition: background 0.4s, color 0.4s;
-moz-transition: background 0.4s, color 0.4s;
-webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
position: absolute;
z-index: 1000;
top: 100%;
left: -9999px;
margin-top: 30px;
background: rgba(255,255,255,0.9);
-webkit-box-shadow: 0px 60px 20px 0px rgba(0, 0, 0, 0.56);
-moz-box-shadow:    0px 60px 20px 0px rgba(0, 0, 0, 0.56);
box-shadow:         0px 60px 20px 0px rgba(0, 0, 0, 0.56);
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height:32px;
background: transparent;	
}
.sky-mega-menu li > div:before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 288px;
	border-right: 14px solid transparent;
	border-bottom: 14px solid rgba(255,255,255,0.9);
	border-left: 14px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
	background:...