JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li>
    <a href="">Первый</a>
    <ul class="sub-nav">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Второй</a>
    <ul class="sub-nav">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Третий</a>
    <ul class="sub-nav">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>
  </li>
</ul>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, fugit aut sint veritatis quos? Consequuntur debitis, ea cum necessitatibus hic architecto praesentium eaque, ipsam id commodi quidem, magni recusandae, nobis.</div>

CSS

.nav {
  list-style: none;
  padding: 0;
}
.nav > li {
  display: inline-block;
  position: relative;
  
  background-color: green;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
}
.nav > li > a {
  text-decoration: none;
  padding: 5px 10px;
}

.sub-nav {
  position: absolute;
  display: none;
  top: 100%;
  z-index: 10000;
  background-color: red;
  list-style: none;
  padding: 0;
  width: 100%;
}
.nav > li:hover > .sub-nav{
  display: block;
}