JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-top" class="jq-off">
<ul>
<li>
<a href="http://www.google.com"><span>About</span></a> 
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>

<li>
<a href="http://yahoo.com"><span>Join</span></a>
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>
</ul>
</div>

CSS

#menu-top {
	background:#f1f1f1;
	text-align:center;
	opacity:0.9;
}

#menu-top > ul {
	padding:0; 
	margin:0 auto;
	display:table;
}

/*FIRST LEVEL*/

#menu-top > ul > li {
	position:relative;
	float:left;
	list-style:none; 
}

#menu-top > ul > li:hover > a, #menu-top > ul:not( :hover ) > li.active > a, #menu-top ul li a:hover {
  color:#444;
}

#menu-top > ul > li > a {
	margin:0;
	padding:0 13px;	
	display:block;
	line-height:400%;
	font-size: 100%;
  color:#001489;
  text-decoration:none;	
	outline-color:#f1f1f1;
}

#menu-top > ul > li span:after {
	width: 0;
	height: 0;
	border: 0.39em solid transparent;
	border-bottom: none;
	border-top-color: #fff;
	border-top: 0.39em solid transparent;
	border-bottom: 0.39em solid transparent; 
	border-left-color: #444;
	content: '';
	display: inline-block;
	position: relative;
	right: -0.353em;
	top:-0.1em;
}

#menu-top > ul > li:hover span:after {
	width: 0;
	height: 0;
	border: 0.39em solid transparent;
	border-bottom: none;
	border-top-color: #444;
	content: '';
	display: inline-block;
	position: relative;
	right: -0.353em;
	top:-0.1em;
}

#menu-top .trans {
	display:none;
}

/*SECOND LEVEL*/
#menu-top.jq-off > ul > li:hover > .dropdown {
	display:block;
}

#menu-top .dropdown {
  display:none;
  position:absolute;
	z-index:2;
  white-space: nowrap;
	background: #f1f1f1;
}

#menu-top .dropdown ul {
	padding:0;
	margin:0;
	list-style: none;
}

#menu-top .dropdown ul li a {
  padding:0;
  margin:5px 10px;
  display:block;
  color:#444;
  font-size:90%;
	line-height:250%;
  text-transform:uppercase;
  text-decoration:none;
	text-align:left;
}

#menu-top .dropdown ul li a:hover {
	color:#444;
	text-decoration:underline;
}

/*CHROME-SAFARI ONLY*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	
  #menu-top > ul > li span:after, #menu-top > ul > li:hover span:after {
	border:none;
	}
	
	#menu-top .trans...

JavaScript

(function menu() {
  //disable the default css hover action
  $('#menu-top').removeClass('jq-off');

  $('#menu-top > ul > li').on('click', function (e) {
    e.stopPropagation();
    var mthis = $(this);  	
    var mparentdropdown = mthis.find('.dropdown');

    //prevent default link action for this parent link if this dropdown is hidden
    if (mparentdropdown.is(':hidden')) { 
      e.preventDefault(); 
    }

    //if a dropdown is hidden on click, then hide all other dropdowns and slide down this dropdown
    if(mparentdropdown.css("display") == "none"){
      $(".dropdown").hide();
      mparentdropdown.stop(true,true).css({display:'none'}).show();	 
    }
  });

  //click anywhere in the document to close all dropdown menus
  $(document).click(function(e){
    $(".dropdown").hide();
  });
})();