JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loli">
  <div class="menu">
    <ul>
      <li><a href="">Главная</a></li>
      <li><a href="">Новости</a>
        <ul class="menu">
          <li class="menu"><a href="">Расписание</a></li>
        </ul>
      </li>
      <li><a href="">О группе</a>
        <ul class="menu">
          <li class="menu"><a href="">Профессия</a></li>
          <li><a href="">Успеваемость</a></li>
        </ul>
      </li>
      <li><a href="">Здание</a>
        <ul class="menu">
          <li class="menu"><a href="">Расписание</a></li>
        </ul>
      </li>
      <li><a 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:not(.menu) 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 {
}

.loli ul li a::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 > .menu > ul > li > a:hover{
  color: black;
}
.loli > .menu > ul > li > a: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;
}