JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pull">
        <a href="#" id="pullMenu">Menu</a>  
    </div>
<div id="nav"><!--nav-->
  
    <ul id="myList">
        <li><a href="#.html">Home</a></li>
        <li class="active"><a href="#.html">About Gnosis</a>
            <ul>
                <li><a href="#.html">What is Gnosis</a></li>
                <li><a href="#.html">Origins of Gnosis</a></li>
                <li><a href="#.html">Foundations</a></li>
            </ul>      
        </li>
        <li><a href="#.html">Articles</a></li>
        <li><a href="#.html">FAQ</a></li>
        <li><a href="#.html">Courses</a></li>
        <li><a href="#.html">Centres</a></li>
        <li><a href="#.html">International</a></li>
   </ul>
</div><!--/nav-->

CSS

body {
     background:brown;
 }

#pull {
	display:none;
	float:left;
	height:auto;
	width:100%;
}

#pull img {
	float:right;
}


#nav{
	float:left;
	height:155px;
	width:63%; 
	background:url(../images/top-banner.png) no-repeat;
	background-position:bottom;
	background-size:100%;
	position:relative;
}

#nav ul {
	height:auto;
	width:100%;
	list-style-type:none;
	position:absolute;
	bottom:0;
	*zoom:1;
}

#nav ul li {
	float:left;
	padding-left:20px;
	position:relative;
}

#nav ul li a {
	font-family:Trajan-Pro;
	font-size:0.9em;
	color:#fff;
	text-decoration:none;
}

#nav ul li a:hover {
	color:#d2aa76;
	border-bottom:2px solid #d2aa76;
	padding-bottom:5px;
}

#nav ul li:hover > a {
	color:#d2aa76;
	border-bottom:2px solid #d2aa76;
	padding-bottom:5px;
}


/*1st level sub-menu */
#nav ul ul {
	display:none;
}

	#nav ul li:hover > ul {
		height:auto;
		width:180px;
		display:block;
	}
	
	#nav ul ul li:hover > a {
	color:#d2aa76;
	border-bottom:none;
}
	
#nav ul ul {
	padding:0;
	position:absolute;
	top:100%;
	padding-top:15px;
}

	#nav ul ul li {
		float:none;
		position:relative;
		padding:7px 0px;
		border-top:1px solid #000;
		
		background: #423d33;
		background: linear-gradient(top, #423d33 0%, #4a4843 40%);
		background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
		background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
		
		-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
		box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
		
		transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
		
	}
		#nav ul ul li a {
			font-size:0.8em;
			padding-left:15px;
		}
		
		#nav ul ul li a:hover {
			border-bottom:none;
		
		}

@media screen and (max-width: 1900px) {
	#logo {
		height:95px;
		width:100%;
		background:none;
	}
	
	#logo h1 {
		top:0;
		margin:0;
		padding-top:10px;
	}
	
	#header-container {
		height:auto;
	}
	
	#pull {
		display:block;
	}
	
	#nav...

JavaScript

var toggle=1;

$(document).ready(function(){
    $('#pullMenu').click(function(){
        if(toggle==1){
            $("#myList").css('display','none');
            toggle=0;
        }else{
            $("#myList").css('display','block');
            toggle=1;
        }
    });
});