JSFiddle - React, Tailwind, and code Playground

HTML

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

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;
}

ul.submenu > li {
  display: block;
}