JSFiddle - React, Tailwind, and code Playground
HTML
<div class="loli">
<div class="menu">
<ul>
<li><a class="hover" href="">Главная</a></li>
<li><a class="hover" href="">Новости</a>
<ul class="menu">
<li class="menu"><a href="">Расписание</a></li>
</ul>
</li>
<li><a class="hover" href="">О группе</a>
<ul class="menu">
<li class="menu"><a href="">Профессия</a></li>
<li><a href="">Успеваемость</a></li>
</ul>
</li>
<li><a class="hover" href="">Здание</a>
<ul class="menu">
<li class="menu"><a href="">Расписание</a></li>
</ul>
</li>
<li><a class="hover" href="">Контакты</a>
<ul class="menu">
<li class="menu"><a href="">Расписание</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS
a {
display: inline-block;
margin-left: 5px;
}
.loli {
height: 75px;
width: 100%;
display: inline-block;
background-color: #0099cc;
left: 600px;
}
.loli ul {
padding: 0;
margin: 0;
font-size: 0;
overflow: hidden;
text-align: center;
}
.loli ul li {
display: inline-block;
list-style: none;
font-size: 36px;
}
.loli ul li a {
color: #fff;
text-decoration: none;
height: 75px;
line-height: 75px;
padding: 0 15px;
position: relative;
z-index: 10;
}
.loli ul li a.hover:hover {
color: black;
}
.loli ul li a.hover::before {
content: " ";
position: absolute;
left: 0;
top: -25px;
width: 100%;
height: 150px;
transform: rotate(14deg);
background-color: rgba(255, 255, 255, 0.3);
opacity: 0;
z-index: -1;
}
.loli ul li a.hover:hover::before {
opacity: 1;
background-color: #fff;
}
.menu li ul li {
padding-right: 15px;
background: #0099cc;
}
.menu li ul {
position: absolute;
display: none;
z-index: 10;
margin-left: -18px;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}