JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
        <ul id="nav">
            <li>
                <a href="#">Menu Item</a>
                <ul>
                    <li><a href="#">Sub-Menu Item</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </div>
    <div id="menu">
        <div id="menu-button"><span id="menu-text">Menu</span> <img src="images/menu.png"></div>
    </div>

CSS

#menu {
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	background-color: #444;
	background-repeat: repeat-x;
}

#menu-button {
	position: relative;
	width: 100%;
}

#menu-text {
	position: absolute;
	top: 13px;
	left: 15px;
	font-size: 18px;
	font-weight: bold;
	padding-right: 10px;
}

#menu-button img {
	position: absolute;
	right: 15px;
	top: 6px;
}

#pull {
	display: block;
}

#navigation {
	display: none;
}

#nav {
	display: block;
	position: relative;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	font-family: "Raleway", Arial, sans-serif;
}

#nav > li {
	list-style-type: none;
	text-align: center;
	background-color: #297585;
	padding: 0px;
	width: 100%;
}

#nav > li a {
	display: block;
	padding: 14px 0px; 
	border-bottom: 1px solid #1F5865;
	color: #FFF;
	width: 100%;
	text-decoration: none;
}

#nav > li > ul {
	display: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#nav > li > ul > li {
	background-color: #1F5865;
	border-bottom: 1px solid #194751;
}

@media (min-width: 768px) {
  #menu {
	  display: none;
  }
  
  #navigation {
	  display: block;
	  width: 100%;
	  height: 42px;
	  background-color: #0b4b53;
  }
  
  #nav {
	display: block;
	width: auto;
	position: relative;
	float: right;
	list-style-type: none;
	padding: 0px 134px 0px 0px;
	margin: 0px;
	font-family: "Raleway", Arial, sans-serif;
	z-index: 60;
  }

  #nav > li {
	display: block;
	position: relative;
	float: left;
	width: auto;
	list-style-type: none;
	background-color: transparent;
	padding: 0px;
  }

  #nav > li > a {
	display: block;
	color: #e1e1e1;
	font-size: 18px;
	padding: 10px 15px;
	text-decoration: none;
	border: 0px;
  }

  #nav a:hover, #nav a:active {
	background-color: #083a40;
  }
  
  #nav > li > ul {
	  display: none;
	  position: relative;
	  z-index: 60;
  }
  
  #nav li:hover > ul {
	  display: block;
	  background: #333;
  }
  
  #nav > li > ul > li {
	  display: block;
	  text-align: left;
	  white-space: nowrap;
	 ...

JavaScript

$(document).ready(function() {
        $("#menu").click(function(){
            $("#navigation").slideToggle();
        });
        $("#nav > li").click(function(event) {
            var w = $(window).width();
            if (w < 768) {
                if ($(this).children("ul").length > 0) {
                    $(this).children("ul").slideToggle();
                    event.preventDefault();
                }
            }
        });
    });
    $(window).resize(function(){
        var w = $(window).width();
        if (w > 768 && $("#navigation").is(':hidden')) {
            $("#navigation").removeAttr('style');
        }
        if (w > 768) {
            $("#nav > li > ul").hide();
        }
    })