JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">      
        <nav class="navbar navbar-default" role="navigation">
            <ul class="nav navbar-nav">
                    <li class="dropdown ">
                        <a class="openSubmenuOnHover" href="www.facebook.com" data-target="#home186">home</a>
                    </li>
                    <li class="dropdown ">
                        <a class="openSubmenuOnHover" href="www.google.com" data-target="#dd196">dd</a>
                    </li>
            </ul>
        </nav>
    </div>
    
    <div class="container">
        <nav class="nav sub-navbar" role="navigation">
                    <ul class="nav navbar-nav collapse" id="home186" aria-expanded="false" style="height: 0px;">
                            <li class="">
                                <a href="#">sub home 1</a>
                            </li>
                            <li class="">
                                <a href="#">sub2 home</a>
                            </li>
                            <li class="">
                                <a href="#">sub3</a>
                            </li>
                            <li class="">
                                <a href="#">sda</a>
                            </li>
                    </ul>
        </nav>
    </div>

CSS

.navbar {
    background-color: #3394e1;
    margin-bottom: 0px;
    border-radius: 0;
    border-width: 0px;
}

.navbar:hover > .sub-navbar {
    display:block;
}
.navbar-nav{
    margin:0!important;
}

.sub-navbar {
    background-color: #5989b0;
}

.nav > li > a {
    color: white !important;
}

.collapsing {
    display: none;
}

.nav > li > a:focus, .nav > li > a:hover, .nav > .active > a, .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: white !important;
    color: black !important;
    text-decoration: none;
}

body{
	background-color:#F2F2F2;
	font-family:Arial, Helvetice, sans-serif;
	font-size:14px;
	line-height:1.5;
}

JavaScript

$(".openSubmenuOnHover").hover(
    function () {
        var thisdiv = $(this).attr("data-target")
        $(thisdiv).collapse("show");
        //$(thisdiv).show("slow");//("show");
    },
    function () {
        var thisdiv = $(this).attr("data-target")
        $(thisdiv).collapse("hide");
        //$(thisdiv).hide();//("hide");
    }
);