JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul class="menu">
        <li class="menu-item">
            <a href="#">Меню</a>
            <ul class="menu-sub">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Меню</a>
            <ul class="menu-sub">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Меню</a>
            <ul class="menu-sub">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  margin: 0 auto;
}

.menu-item > a,
.menu-sub a {
  display: block;
  background: blue;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}

.menu-item:hover .menu-sub {
  display: block;
}

.menu-item + .menu-item {
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.menu-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.menu-sub a {
  background: lightblue;
  color: blue;
}

.menu-sub a:hover {
  background: red;
  color: #fff
}