JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
    body {
    margin: 10px;
    }
    @media (min-width: 768px) {
    .navbar-ex2-collapse { float: left; }
    }
</style>
<!-- Bootstrap Menu Bar -->
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Bootstrap Menu Bar</a>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item 3<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Item3.1</a></li>
          <li><a href="#">Item3.2</a></li>
          <li><a href="#">Item3.3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<br /><br /><br /><br />

<!-- Main navigation bar -->
<nav id="main_navbar" class="navbar navbar-default anavbar" role="navigation">
	<!-- Navbar header for mobile view -->
	<div class="navbar-header">
		<div class="navbar-brand">
			My Menu Bar
		</div>
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
	</div>
    
	<!-- Navbar menu -->
	<div class="collapse navbar-collapse navbar-ex2-collapse">
		<ul id="main_nav" class="anav">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li>
				<a...

CSS

.anav, .anav-sub {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.anav > li > a,
.anav-sub > li > a {
	text-decoration: none;
	display: block;
}

/* nav collapse button */
.anavbar .navbar-toggle {
	border-color: #ddd;
}
.anavbar .navbar-toggle:hover {
	background: #ddd;
}
.anavbar .navbar-toggle .icon-bar{
	background: #ccc;
}

/* navbar div */
.anavbar {
	min-height: 40px;
	background: background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
}

/* 1st layer ul */
.anav {
	float: left;
	display: block;
	width: 100%;
}
.anav > li {
	position: relative;
}
.anav > li > a {
	padding: 10px 5px;
	color: #777;
}
.anav > li:hover > a {
	color: #333;
}

/* 2nd layer ul */
.anav .anav-sub {
	overflow: hidden;
	display: none;
	white-space: nowrap;
}
.anav .arrow{
	display: inline-block;
    height: 0;
    width: 0;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 4px;
    background: transparent;
    border-top: 4px solid #777;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 0 solid transparent;
}
.anav > li:hover .arrow {
    border-top-color: #333;
}
.anav .anav-sub > li > a {
	padding: 5px 15px;
	color: #777;
}
.anav .anav-sub > li:hover > a {
	color: #333;
}

/* Responsive */
@media (min-width: 768px) {
	.anav > li { float: left; width: auto; }
	.anav > li > a { padding: 15px; min-width: 85px; text-align: center; }
	.anav .anav-sub {
		position: absolute;
		-webkit-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
		box-shadow: 0 6px 12px rgba(0,0,0,0.175);
		min-width: 160px;
	}
	.open > .anav-sub { padding-bottom: 4px; border: 1px solid #ccc; }
	.anav .anav-sub > li > a { padding: 5px 20px; min-width: 85px; color: #333; }
	.anav .anav-sub > li:hover > a { background: #428bca; color: #fff; }
}

JavaScript

$(function(){
	var ANAV_CLASS = ".anav",
		ASUBNAV_CLASS = ".anav-sub";
	function getParent(el){
		return $(el).filter(ASUBNAV_CLASS).parent();
	}
	function toggleHandler(event){
		var $this = $(this),
			$subNavbar = $this.children(ASUBNAV_CLASS),
			isVertical = $this.css('float') == 'none' ? true : false;

		if(isVertical && event && event.type == 'click'){
			toggle.call($subNavbar);
			event.preventDefault();
			event.stopPropagation();
		}
		else if(!isVertical && event && event.type == 'mouseenter'){
			toggle.call($subNavbar, true);
		}
		else if(!isVertical && event && event.type == 'mouseleave'){
			toggle.call($subNavbar, false);
		}
	}
	function ASubNav(el){
		this.element = el;
		getParent(el)
			.on('click mouseenter mouseleave', toggleHandler);
	}
	var toggle = ASubNav.prototype.toggle = function(_isOpen){
		var $this = $(this),
			$parent = getParent(this);
			isOpen = typeof _isOpen == 'boolean' ? _isOpen : !$parent.hasClass('open');
		if(isOpen){
			$parent.addClass('open');
			$this.clearQueue().finish().slideDown();
		}else{
			$parent.removeClass('open');
			$this.clearQueue().finish().slideUp();
		}
	};
	ASubNav.prototype.open = function(){
		toggle.call(this, true);
	};
	ASubNav.prototype.close = function(){
		toggle.call(this, false);
	};

	$.fn.asubnav = function(option){
		return this.each(function(){
			var $this = $(this),
				data = $this.data('anav-sub');

			!data && $this.data('anav-sub', (data = new ASubNav(this)));
			if(typeof option == 'string'){
				data[option].call($this);
			}
		});
	}
	$.fn.asubnav.Constructor = ASubNav;

	$(ANAV_CLASS + " " + ASUBNAV_CLASS).asubnav();
});