JSFiddle - React, Tailwind, and code Playground

HTML

<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<div class="navcontainer">
    <div class="hamburger">MENU</div>
	<nav class="horizontal">
	  <ul>
	    <li class="first">
	      <a href="#">Link 1</a>
	      <ul>
	        <li><a href="#">Long Sublink</a>
	        </li>
	        <li><a href="#">Sublink</a>
	        </li>
	        <li><a href="#">Sublink</a>
	        </li>
	      </ul>
	    </li>
	    <li><a href="#">Link 2</a>
	    </li>
	    <li>
	      <a href="#">Link 3</a>
	      <ul>
	        <li><a href="#">Sublink</a>
	        </li>
	        <li><a href="#">Longer Sublink</a>
	        </li>
	        <li><a href="#">Sublink</a>
	        </li>
	      </ul>
	    </li>
	    <li><a href="#">Link 4</a>
	    </li>
	    <li><a href="#">Link 5</a>
	    </li>
	  </ul>
	</nav>
</div>

CSS

.navcontainer.horizontal {
    padding-top: 0;
}

 .navcontainer.horizontal .hamburger {
    display: none;
}

nav.horizontal {
    background: #111;
    height: 42px;
}
nav ul {
    margin: 0;
    padding:0;
}
nav ul li {
    margin: 0;
    display: block;
    float: left;
    height: 42px;
    position: relative;
}
nav ul li span.arrow {
    position: absolute;
    top: 17px;
    right: 10px;
}
nav ul li span.arrow-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 5px solid #fff;
}
nav ul li.active span.arrow-down {
    display: none;
}
nav ul li span.arrow-up {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 5px solid #fff;
    display: none;
}
nav ul li.active span.arrow-up {
    display: block;
}
nav ul li a {
    display:block;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    font-family:'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 100%;
    -webkit-transition: background 0.15s ease-in-out;
    -moz-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
}
nav ul li a:hover, nav > ul > li.active > a {
    background: #060;
}
nav ul li a:before, nav ul li a span {
    display: inline-block;
    vertical-align: middle;
}
nav > ul > li > a:before {
    content:'';
    height: 100%;
}
nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    height: auto;
    display: none;
    background: #060;
}
nav ul li:hover ul {
    display: block;
}
nav ul ul li {
    float: none;
    width: 100%;
}
nav ul li.parent a {
    display: block;
    padding: 0 32px 0 10px;
}
nav ul li.parent li a {
    padding: 0 10px;
    line-height: 42px;
    white-space: nowrap;
}
nav ul li.parent li a:hover {
    background: rgba(0, 0, 0, 0.2);
}
/* Vertical nav */
 .navcontainer.vertical {
    padding-top: 40px;
   ...

JavaScript

function horizVert() {
    var event;
    if ($(window).width() < 768) {
        event = "click";
        $('nav,.navcontainer').addClass("vertical").removeClass("horizontal");
    } else {
        event = "hover";
        $('nav').removeAttr("style");
        $('nav,.navcontainer').addClass("horizontal").removeClass("vertical");
    }
    $('nav ul li').removeClass("active");
    $('nav ul a').on(event, function () {
        $(this).parents('li').toggleClass("active");
    });
}
horizVert();
$(window).resize(horizVert);

$('.hamburger').click(function(){
    $("nav.vertical").slideToggle('fast');
});

$('nav > ul > li > a').each(function () {
    $(this).wrapInner('<span></span>');
});

$('nav ul li').each(function () {
    if ($(this).find("ul").length > 0) {
        $(this).addClass("parent");
        $(this).children('a').append('<span class="arrow arrow-down"></span><span class="arrow arrow-up"></span>');
    }
});