JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css">
<link rel="stylesheet" href="http://bootswatch.com/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootswatch.com/assets/css/bootswatch.min.css">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> <a class="navbar-brand" href="./">Bootswatch</a>
<button data-target="#navbar-main" data-toggle="collapse" type="button" class="navbar-toggle"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"> <a id="themes" href="#" data-toggle="dropdown" class="dropdown-toggle">Themes <span class="caret"></span></a>
<ul aria-labelledby="themes" class="dropdown-menu">
<li><a href="./default/">Default</a>
</li>
<li class="divider"></li>
<li><a href="./amelia/">Amelia</a>
</li>
<li><a href="./cerulean/">Cerulean</a>
</li>
<li><a href="./cosmo/">Cosmo</a>
</li>
<li><a href="./cyborg/">Cyborg</a>
</li>
<li><a href="./darkly/">Darkly</a>
</li>
<li><a href="./flatly/">Flatly</a>
</li>
<li><a href="./journal/">Journal</a>
</li>
<li><a href="./lumen/">Lumen</a>
</li>
<li><a href="./readable/">Readable</a>
</li>
<li><a...
JavaScript
$(".dropdown").hover(function () {
$(this).addClass("open");
}, function () {
$(this).removeClass("open");
});