JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<ul>
  <li>
    <a href="#">1</a>
    <ul class='dropdown'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </li>
  <li>
    <a href="#">2</a>
    <ul class='dropdown'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>

SCSS

ul {
  position: relative;
  li {
    height: 30px;
    .dropdown {
      display: none;
      position: absolute;
      margin-top: -18px;
      padding: 0;
      margin-left: 40px;
    }
    &:hover {
      .dropdown {
        display: block;
      }
    }
  }
}