JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
  
  
  <div class="menu__item-wrap">
    <a href="" class="menu__item">Раздел меню</a>
  </div>
  
  <div class="menu__item-wrap">
    <a href="" class="menu__item">Раздел меню</a>
    
    <div class="menu__submenu">
      <div class="menu__item-wrap">
        <a href="" class="menu__item">Раздел меню</a>
      </div>
      <div class="menu__item-wrap">
        <a href="" class="menu__item">Раздел меню</a>
      </div>
      <div class="menu__item-wrap">
        <a href="" class="menu__item">Раздел меню</a>
      </div>
    </div>
    
  </div>
  
  <div class="menu__item-wrap">
    <a href="" class="menu__item">Раздел меню</a>
  </div>
  
</nav>

CSS

.menu {
  display: flex;
  background: #000;
}

  .menu__item-wrap {
    position: relative;
  }

    .menu__item {
      display: block;
      padding: 15px 30px;
      color: #fff;
      text-decoration: none;
    }

  .menu__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

    .menu__submenu .menu__item {
      background: #eee;
      color: #000;
    }
    
     .menu__item-wrap:hover .menu__submenu {
        opacity: 1;
        visibility: visible;
      }