JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
	<div id="nav_links">
<ul class="dropdown">
  <li>
    <a href="…">4-Color Offset Printing</a>
    <ul>
      <li>
        <a href="…">Monthly Special</a>
      </li>
      <li>
        <a href="…">Bookmarks</a>
      </li>
      <li>
      	<a href="...">Brochures / Flyers</a>
      </li>
      <li>
      	<a href="...">Brochures w/ Direct Mailing</a>
      </li>
      <li>
      	<a href="...">Brochures w/ Free Folding</a>
      </li>
      <li>
      	<a href="...">Business Cards</a>
      </li>
       <li>
      	<a href="...">Business Cards w/Round Corners</a>
      </li>
       <li>
      	<a href="...">Business Cards - Mini</a>
      </li>
       <li>
      	<a href="...">Business Cards w/Free Shipping</a>
      </li>
       <li>
      	<a href="...">Fold-Over Business Cards</a>
      </li>
       <li>
      	<a href="...">Calendars</a>
      </li>
       <li>
      	<a href="...">Catalogs</a>
      </li>
       <li>
      	<a href="...">CD Inlays w/ Perf</a>
      </li>
       <li>
      	<a href="...">CD Inserts</a>
      </li>
       <li>
      	<a href="...">Club Flyers</a>
      </li>
       <li>
      	<a href="...">Custom Order</a>
      </li>
       <li>
      	<a href="...">Door Hangers</a>
      </li>
       <li>
      	<a href="...">DVD Inserts</a>
      </li>
       <li>
      	<a href="...">DVD/CD Mailers</a>
      </li>
       <li>
      	<a href="...">Envelopes</a>
      </li>
       <li>
      	<a href="...">Small Flyers</a>
      </li>
       <li>
      	<a href="...">Presentation Folders</a>
      </li>
       <li>
      	<a href="...">Greeting Cards</a>
      </li>
       <li>
      	<a href="...">Hang Tags</a>
      </li>
       <li>
      	<a href="...">Labels - Cut Sheets</a>
      </li>
       <li>
      	<a href="...">Letterhead</a>
      </li>
       <li>
      	<a href="...">Notepads</a>
      </li>
       <li>
      	<a href="...">Postcards</a>
      </li>
       <li>
      	<a href="...">Postcards w/ Direct...

CSS

#nav {
	background-color:#343232;
	width:100%;
	height:44px;
}
#nav_links {
	background-color:#343232;	
	height:44px;
	width:960px;
	margin:0px auto;
}
#nav li a {
	color:#FFF;
}
#nav li ul a {
	color:#000;	
}

#nav li:nth-child(1):hover {
	background:#0F0;
	text-decoration:none;
	padding:0px;
}
#nav li:nth-child(2):hover {
	background:#0F0;
	text-decoration:none;
	padding:0px;
}		

.dropdown,
.dropdown ul,
.dropdown li{
	height:44px;
  margin  : 0;
  padding : 0px 0px 0px 0px;
  color:#FFF;
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.dropdown ul{
  display  : none;
  position : absolute;
  top      : 100%;
  left     : 0;
  z-index  : 1;
}

[dir=rtl] .dropdown ul{
  left  : auto;
  right : 0;
}

.dropdown ul ul,
[dir=rtl] .dropdown ul .dropdownLeftToRight ul{
  top   : 0;
  left  : 100%;
  right : auto;
}

[dir=rtl] .dropdown ul ul,
.dropdown ul .dropdownRightToLeft ul{
  left  : auto;
  right : 100%;
}

.dropdown li{
	margin-left:20px;
  position        : relative;
  display         : block;
  list-style-type : none;
}

.dropdown > li{
  display : inline-block;
}

.dropdown a,
.dropdown span{
  display         : block;
  text-decoration : none;
  white-space     : pre;
}

.dropdown li:hover > ul{
  display : block;
}

.dropdownVertical{
  display : inline-block;
}

.dropdownVertical > li{
  display : block;
}

.dropdownVertical ul{
  top  : 0;
  left : 100%;
}

[dir=rtl] .dropdownVertical ul{
  left  : auto;
  right : 100%;
}

.dropdownJavaScript li:hover > ul{
  display : none;
}

.dropdownJavaScript li.dropdownOpen > ul{
  display : block;
}

JavaScript

/*

Dropdown.js

Creates touch-friendly drop-down menus

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the Dropdown object
var Dropdown = (function(){

  // the delay, in milliseconds
  var DELAY = 250;

  // the list of menus
  var menus = [];

  // Initialises the drop-down menus.
  function initialise(){

    // listen for touch events on the document if appropriate
    if ('createTouch' in document){
      document.body.addEventListener('touchstart', handleTouchStart, false);
    }

    // loop over the menus, converting them
    var menus = document.querySelectorAll('ul.dropdown');
    for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);

  }

  /* Handles a touch start event. The parameter is:
   *
   * e - the event
   */
  function handleTouchStart(e){

    // determine whether any menu is open
    var isOpen = false;
    for (var i = 0; i < menus.length; i ++){
      if (menus[i].isOpen) isOpen = true;
    }

    // return immediately if all menus are closed
    if (!isOpen) return;

    // move up the document tree until we reach the root node
    var node = e.target;
    while (node != null){

      // return immediately if we are inside a drop-down menu
      if (/\bdropdown\b/.test(node.className)) return;

      // move onto the parent node
      node = node.parentNode;

    }

    // close all menus
    close();

  }

  /* Closes all menus except the specified menu. The parameter is:
   *
   * menu - a menu not to close; this parameter is optional
   */
  function close(menu){

    // loop over the menus, closing them
    for (var i = 0; i < menus.length; i ++){
      if (menus[i] != menu) menus[i].close();
    }

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - either the DOM node of the menu or the ID of the node
   */
  function applyTo(node){

    // fetch the DOM...