JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <nav class="nav-items">
  <ul role="menu">
    <li role="menuitem" aria-haspopup="menu">
      <a href="#">Category 1</a>
      <nav class="sub-nav-items">
        <ul role="menu" class="sub-nav">
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 1</a></li>
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 2</a></li>
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 3</a></li>
        </ul>
      </nav>
    </li>
    <li role="menuitem" aria-haspopup="menu">
      <a href="#">Category 2</a>
      <nav class="sub-nav-items">
        <ul role="menu" class="sub-nav">
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 4</a></li>
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 5</a></li>
          <li role="menuitem" aria-haspopup="false"><a href="#">Subcategory 6</a></li>
        </ul>
      </nav>
    </li>
    <li role="menuitem" aria-haspopup="false">
      <a href="#">Category 3</a>
    </li>
  </ul>
</nav>
</div>

CSS

.container {
  height: 3rem;
  display: grid;
  align-items: center;
  margin: 0 1rem;
  background-color: #c3c3c3;
  position: relative;
}

/* List styling */
.nav-items > ul[role="menu"] {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

/* List item styling */
.nav-items > ul[role="menu"] > li[role="menuitem"] {
  display: inline-block;
  min-width: 4rem;
  text-align: center;
  padding: 0 1rem;
}

/* Adjusting line-height on links */
.nav-items > ul[role="menu"] > li[role="menuitem"] a {
  line-height: 3rem;
}

/* Hide subcategories by default */
.nav-items .sub-nav-items {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 3rem;
  width: 100%;
  background-color: grey;
  
  /* Slide in effect */
  transform-origin: top center;
  transform: scale3d(1, 0, 1);
  transition: 0.4s;
}

/* Display subcategories on hover */
.nav-items ul li:hover .sub-nav-items {
  opacity: 1;
  visibility: visible;
  transform: scale3d(1, 1, 1);
}