JSFiddle - React, Tailwind, and code Playground

by Matheus Castiglioni

HTML

<nav class="nav-default">
  <ul>
    <li>Menu 1
      <ul>
        <li>Sub Menu 1</li>
        <li>Sub Menu 2</li>
        <li>Sub Menu 3</li>
      </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</nav>

CSS

nav.nav-default ul {
  align-items: center;
  background: linear-gradient(#595959, #333333);
  color: #FFFFFF;
  display: flex;
  justify-content: flex-start;
  padding: 0;
}
nav.nav-default ul li {
  list-style: none;
  padding: 1rem;
}
nav.nav-default ul li:hover {
  background: #FFFFFF;
  color: #595959;
  cursor: pointer;
}
nav.nav-default ul li:hover > ul {
  display: block;
}
nav.nav-default ul li ul {
  display: none;
  position: absolute;
  top: 65px;
  left: 8px;
}