JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="nav">

  <ul>

    <li>
      <a href="#">
        link
      </a>
      <div class="sub-nav">
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
      </div>
    </li>
    <li>
      <a href="#">
        link
      </a>
      <div class="sub-nav">
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>
      </div>
    </li>
    <li>
      <a href="#">
        link
      </a>
      <div class="sub-nav">
        <a href="#">
          item
        </a>
        <a href="#">
          item
        </a>

      </div>
    </li>
    <li>
      <a href="#">
        link
      </a>
    </li>
  </ul>


</div>

SCSS

.nav {
  ul {
    *zoom: 1;
    &:before {
      content: " ";
      display: table;
    }
    &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
    transform: translateZ(0);
  }
  li {
    position: relative;
    float: left;
    > a {
      display: block;
      padding: 3px 20px;
      background: red;
      &:hover {
        background: yellow;
      }
    }
    &:hover {
      .sub-nav {
        opacity: 1;
        visibility: visible;
        margin-top: 0;
      }
    }
  }
  .sub-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100px;
    padding: 10px;
    background: yellow;
    opacity: 0;
    visibility: 0;
    margin-top: 10px;
    transition: margin .3s 0s, visibility .3s 0s, opacity .3s 0s;
    > a {
      display: block;
      &:hover {}
    }
  }
}