JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <a href="#">First
    <div class="submenu">
      <a href="#">Subfirst</a>
      <a href="#">Subsecond</a>
      <a href="#">Subthird</a>
    </div>
  </a>
  <a href="#">Second</a>
  <a href="#">Third</a>
</nav>

CSS

nav {
  width: 500px;
  background-color: #222;
  display: flex;
}

nav > a {
  flex: 1;
  padding: 5px;
  color: #DDD;
  text-align: center;
  font-family: "Ubuntu", "Calibri", "Arial";
  text-decoration: none;
  font-size: 1.5em;
}

nav a div {
  display: none;
}

nav a:hover div {
  display: inline-block;
}