JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/261525

by Lhankor_Mhy

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<nav id="gnav">
        <ul>
          <li><a href="">HOME</a></li>
          <li class="toggle">
            <a href="">ABOUT</a>
            <div class="menu">
              <ul class="menu_inner">
                <li><a href="#">ABOUT SUB 01</a></li>
                <li><a href="">ABOUT SUB 02</a></li>
                <li><a href="">ABOUT SUB 03</a></li>
              </ul>
              <ul class="menu_inner">
                <li><a href="">ABOUT SUB 04</a></li>
                <li><a href="">ABOUT SUB 05</a></li>
                <li><a href="">ABOUT SUB 06</a></li>
              </ul>
            </div>
          </li>
          <li><a href="">NEWS</a></li>
          <li class="toggle">
            <a href="">COMPANY</a>
            <div class="menu">
              <ul class="menu_inner">
                <li><a href="">COMPANY SUB 01</a></li>
                <li><a href="">COMPANY SUB 02</a></li>
                <li><a href="">COMPANY SUB 03</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>

SCSS

a {
    text-decoration: none;
    color: #333;
  }

#gnav > ul {
display: table;
padding-left: 50px;

> li {
    display: table-cell;
    margin-right: 2em;

    &:hover {
    color: #fff;
    background-color: #19192b;

    > a {
        color: #fff;
    }

    .menu {
        max-height: 9999px;
        opacity: 1;
    }
    }

    > a {
    display: block;
    padding: 25.5px 1em 15.5px;
    transition: all .2s ease-in;
    }
}

.menu {
    transition: all .2s ease-in;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    left: 0;
    text-align: center;
    position: absolute;
    background-color: #19192b;

    .menu_inner {
    padding: 1em 0;

    li {
        display: inline-block;
        margin: 0 .5em;
    }
    }

    a {
    color: #fff;
    }
}
}