JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main">
  <li class="main-item">
    <a href="" class="main-link">link</a>
    <ul class="sub">
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
    </ul>
  </li>
</ul>

CSS

li {
  list-style-type: none;
}
.main-item:hover .sub {
  display: block;
}
.sub {
  display: none;
  margin-top: 30px;
  background: #eee;
}
.sub li {

}