JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <a class="home" href="../index.htm" title="Home Page"></a>
    <a class="to_nav" href="#nav" ></a>
    <div class="logo">
        <a href="#top">
            <h1>Deeran</h1>
            <span>Graphic Design</span>
        </a>
    </div>
    <nav>
        <ul class="drop">
            <li>
                <a id="menu">menu</a>
                <ul class="hide">
                    <li><a href="#folio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact/Hire</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

CSS

nav {margin: 0; padding: 0;}
nav ul li a#menu {
    display: block;
    width: 67px;
    height: 50px;
    margin-top: 9px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
}

nav ul ul.hide {
    display: none;
    list-style: none;
    margin: 10px 0 0;
    text-indent: none;
    clear: both;
    width: 100%;
    position: absolute;
    left: 0px;
}

nav ul ul.hide li {margin: 0;}
nav ul li > ul {
    display: block;
    list-style-type: none;
    }

JavaScript

var toggle = document.getElementById('menu');
  var menu = document.getElementsByClassName('hide');
  toggle.addEventListener('click', function(event) {
      console.log('test');
      menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
  });