JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation col-12">
<ul class="menu">
<li class="icon">
<p onClick="dropdownMenu()">&#9776;</p></li>
<li> <p>Home</p></li>
<li> <p href="test.html">Eat</p></li>
<li> <p id="shop">Shop</p>
        <ul class="shop-subheadings">
            <li>Subheading 1</li>
            <li>Subheading 2</li>
            <li>Subheading 3</li>
        </ul>
</li>
<li> <p>Discover</p></li>
<li> <p>Edge Club</p></li>
<li> <p>Contact</p></li>
</ul>
</div>

CSS

.navigation {
	background-color: #454242;
	text-align:center;
}

ul.menu {
	height: 43px;
	background-color: #454242;
	list-style-type: none;
	padding: 0;
	overflow: hidden;
	transition: 1.0s;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	display:table;
  margin:auto;
	text-align: center;
}

ul.menu li {
	float: left;
	display: inline;
}

ul.menu li p {
	display: inline-block;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 20px;
	text-decoration: none;
	transition: 1.0s;
	font-size: 17px;
	height: 23px;
  margin: 0;
}

ul.menu li p:hover {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li p:active {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li.icon {
	display:none;
}

@media screen and (max-width: 680px) {	
ul.menu li:not(:first-child){
	display:none;
	margin: auto;
	float: left;
}
	
ul.menu li.icon {
	display: inline;
	float: left;
	position: absolute;
	left: 0px;
	text-align: left;
}
}

@media screen and (max-width: 680px) {
	
ul.menu.responsive li.icon {
	
	float: left;
	position: absolute;
	text-align: left;
	color: black;
}
	
ul.menu.responsive{
	position: relative;
	height: 258px;
	transition: 1.0s;
	width: 100%
}
	
ul.menu.responsive li{
	float: none;
	display: inline;
	
}
	
ul.menu.responsive li p{
	display:block;
	text-align: center;
}	
}

    ul.shop-subheadings{
        display: none;
    }
    ul.menu li.icon{
      display: block;
      position: absolute;
      left: 0;
    }

JavaScript

dropdownMenu = function() {
	document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}

    $("#shop").click(function(){
        $("ul.shop-subheadings").show();
    })