JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul { margin: 0; padding: 0; }
ul { display: flex; }
ul li {
  list-style-type: none;
  flex-basis: auto;
  flex-grow: 1;
  background: #cf970c;
  text-align: center;
}
ul li a { padding: 20px 0; display: block; text-decoration: none; }

.sub-menu {
  position: absolute;
  top: 70px;
  left: 170px;
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.main-menu > li:hover .sub-menu {
  display: block;
}