JSFiddle - React, Tailwind, and code Playground

by Lucas Henrique

HTML

<ul class="menu">
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub-menu 1-1</a></li>
      <li><a href="#">Sub-menu 1-2</a></li>
      <li><a href="#">Sub-menu 1-3</a></li>
      <li><a href="#">Sub-menu 1-4</a></li>
      <li><a href="#">Sub-menu 1-5</a></li>
    </ul>
  </li>
</ul>

CSS

/* Ignorar */
*{
  font-family: arial, sans-serif;
  font-size: 0.9rem;
  text-decoration: none !important;
}

/* Ver */
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* menu */
ul li {
  display: block;
  position: relative;
  float: left;
}
  ul li a {
    padding: 10px;
    text-transform: uppercase;
    background: black;
    color: white;
    margin: 2px;
    white-space: nowrap;
  }
    ul li a:hover {
      background: blue;
    }

/* sub-menu */
ul li ul {
  display: none;
}
  ul li:hover ul {
    display: block;
    margin-top: 20px;
  }
    ul li:hover ul li {
      float: none;
      margin-top: 20px;
    }
      ul li:hover a {
        background: blue;
      }
        ul li:hover ul li a{
          background: black;
        }
          ul li:hover ul li a:hover {
            background: blue;
          }