JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="header">

<div class="mob_menu" onclick="menu();">
<div></div>
<div></div>
<div></div>
</div>

</div>

<div id="menu" class="menu">

<nav id="nav" class="nav">
  <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</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

</div>

<p>Page</p>
<p>Page</p>
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
<p>Page</p>
<p>Page</p>
<p>https://css-tricks.com/solved-with-css-dropdown-menus/</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>Page</p>
<p>The End</p>

CSS

body {margin:0;position:relative;}
.header {background-color:#000000;position:fixed;top:0px;left:0px;width:100%;}

/* Menu Burger */
.mob_menu {width:36px;padding:11px;cursor:pointer;}
.mob_menu div {height:4px;background-color:#ABD037;border-radius:50px;}
.mob_menu div:nth-child(2) {margin:8px 0;}
/* END */

.menu {position:fixed;top:50px;bottom:0px;right:auto;left:-100%;background-color:#dedede;width:100%;
transition: all 0.5s;}
.open {left:0;transition: all 0.5s;}

.nav {width:100%;height:100%;overflow-y:scroll;background-color:#dedede;}

/* menu dropdown */


nav {
  font-family: arial;
}

#nav a {
  text-decoration: none;
}

#nav nav {
  font-family: monospace;
}

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

#nav li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 0 1rem;
  line-height:100px;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
#nav li a {
  color: #fff;
}

#nav li:hover,
#nav li:focus-within {
  background: red;
  cursor: pointer;
}

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

#nav ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0px;
  left: 0;
  display: none;
}

#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;
}

#nav ul li ul li {
  clear: both;
  width: 100%;
    line-height:50px;
}

JavaScript

function menu() {

var menu = document.getElementById('menu');
if (menu.className == "menu") {menu.className = "menu open";}
else {menu.className = "menu";}

var nav = document.getElementById('nav');
nav.scroll({top:0,behavior:'smooth'});
}