JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="panel">
<div class="container">

<div class="logo">
LOGO
</div>

<div class="menu"><a href="#" onclick="menu();">MENU</a></div>

<nav class="nav" id="nav">
<a href="#home">One</a>
<a href="#news">Two</a>
<a href="#contact">Three</a>


<div class="drop">
<div class="dropLink"><a href="#drop">Drop Me</a></div>

<div class="dropMenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact Us Here</a>

</div>
</div>



<a href="#news">Four</a>
<a href="#contact">Five</a>
</nav>
</div>
</div>

<div class="tmargin"></div>

<div style="background-color:red;">

ikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgf

<p>
ikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgfikuaiwsdf afwiufh awrfuhagwergf juwsrgf
</p>
</div>

CSS

body {margin:0;font-family:arial;overflow-x:hidden;}

.panel {border:solid #999999;border-width: 0 0 5px 0;height:85px;position:fixed;width:100%;top:0;left:0;background-color:#ffffff;}

.tmargin {height:90px;}

.container {max-width:1020px;margin:auto;height:90px;}

.menu {float:right;display:none;}
.menu a {line-height:60px;padding:0 10px;text-decoration:none;color:#111111;display:block;}

.logo {float:left;}

.nav {float:right;}

.nav a {display:inline-block;line-height:80px;padding:0 20px;text-decoration:none;color:#111111;}
.nav a:hover {border:solid #dddddd;border-width:0 0 5px 0;}

.drop {display:inline-block;line-height:90px;}

.dropMenu {display:none;}

.dropLink:hover + div {display:inline-block;}

.dropMenu {position:absolute;background-color:#eeeeee;z-index: 1;top:85px;border:solid #dddddd;border-width:5px 0 0 0;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.dropMenu a {line-height:48px;display:block;border:none;}

.dropMenu:hover {display:inline-block;}
.dropMenu a:hover {border:none;background-color:#dddddd;}

@media screen and (max-width:600px){
.panel {height:60px;}
.tmargin {height:60px;}
.container {height:55px;}
.nav {position:absolute;top:65px;right:-300px;width:300px;}
.nav a, .dropMenu {display:block;}  
.nav a:hover {border:none;}
.dropMenu:hover {display:block;}
.dropLink:hover + div {display:block;}
.nav a {line-height:48px;background-color:#eeeeee;}
.dropMenu {position:relative;top:auto;border:none;box-shadow:none;background-color:#dddddd;width:300px;} 
.dropMenu a {background-color:#dddddd;text-indent:10px;} 
.menu {display:block;}
.openNav {right:0px;}
}

JavaScript

function menu() {
  var x = document.getElementById("nav");
  if (x.className === "nav") {
    x.className += " openNav";
  } else {
    x.className = "nav";
  }
}