JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="mob_nav" class="mob_nav">
<a href="#" onclick="nav_open();">close</a> hello
</div>

<nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#" aria-haspopup="true">Two</a>
      <ul class="dropdown" aria-label="submenu">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2-again very very long</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#" aria-haspopup="true">Three</a>
      <ul class="dropdown" aria-label="submenu">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
        <li><a href="#">Sub-4</a></li>
        <li><a href="#">Sub-5</a></li>
        <li><a href="#">Sub-6</a></li>
      </ul>
    </li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
    <li><a href="#" onclick="nav_open();">Six</a></li>
  </ul> 
</nav>

CSS

body {margin:0;}

nav {font-family: Arial;}

nav a {text-decoration: none;}

nav ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

nav li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition: all 0.5s ease;
}
  
nav li a {
  color: #fff;
}

nav li:hover,
nav li:focus-within {
  background: red;
  cursor: pointer;
  transition: all 0.5s ease;
  
}

nav li:focus-within a {
  outline: none;
}

nav ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  margin-top: -2rem;
  left: 0;
  z-index:-1;
  min-width:250px;
  transition: all 0.5s 0s ease;
  pointer-events: none;
  
}

nav ul li:hover > ul {pointer-events: all;}

nav ul li:hover > ul,
nav ul li:focus-within > ul,
nav ul li ul:hover,
nav ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
margin-top: 1rem;
transition: all 0.5s  ease; 
}

nav ul li ul li {float: none;}
nav ul li ul li a {
width:100%;
display: block;
}


.mob_nav {background-color:pink;width:100%;height:100%;overflow-y: auto;position:absolute;left:-100%;top:0;opacity:0;z-index:500;
transition:opacity 0.5s ease, left 0s 0.5s ease;}
.mob_nav2 {background-color:pink;width:100%;height:100%;overflow-y: auto;position:absolute;left:0%;top:0;opacity:1;transition:opacity 0.5s ease;z-index:500;}

JavaScript

function nav_open() {
var nav = document.getElementById('mob_nav');
if (nav.className == "mob_nav") {nav.className = "mob_nav2";}
else {nav.className = "mob_nav";}
}