JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">LOGO HERE!</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Categories</a></li>
						<li><a href="#">Blog Post</a></li>
						<li role="separator" class="divider"></li>
						<li class="dropdown dropdown-submenu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Search Engines</a>
							<ul class="dropdown-menu">
								<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Google</a>
									<ul class="dropdown-menu">
										<li><a href="https://adwords.google.com" target="_blank">Google Adwords</a></li>
										<li><a href="https://analytics.google.com" target="_blank">Google...

CSS

.dropdown-menu>li>a:hover{
			background-color:rgba(216,216,216,1);
			background-image:none;
			color:#000;
		}
		.divider{
			background-color:#fff;
		}
		.dropdown-submenu{
			position:relative;
		}
		.dropdown-submenu>.dropdown-menu{
			top:0;
			left:100%;
			margin-top:-6px;
			margin-left:-1px;
			-webkit-border-radius:0 6px 6px 6px;
			-moz-border-radius:0 6px 6px 6px;
			border-radius:0 6px 6px 6px;
		}
		.dropdown-submenu>a:after{
			display:block;
			content: " ";
			float:right;
			width:0;
			height:0;
			border-color:transparent;
			border-style: solid;
			border-width:5px 0 5px 5px;
			border-left-color: #cccccc;
			margin-top:5px;
			margin-right: -10px;
		}
		.dropdown-submenu:hover>a:after{
			border-left-color: #555;
		}
		.dropdown-submenu.pull-left{
			float:none;
		}
		.dropdown-submenu.pull-left>.dropdown-menu{
			left:100%;
			margin-left:1-0px;
			-webkit-border-radius:6px 0 6px 6px;
			-moz-border-radius:6px 0 6px 6px;
			border-radius:6px 0 6px 6px;
		}

JavaScript

$(document).ready(function(){
		  $('a[data-toggle=dropdown]').on('click', function(e){
		    //$(this).next('ul').show();

		    //console.log('click');
		    e.stopPropagation();
		    e.preventDefault();
		    $(this).parent().siblings().removeClass('open');
		    $(this).parent().toggleClass('open');
		  });
		  if($('.dropdown-menu').hasClass('open')){
		  	console.log('visible');
		  }
		});