JSFiddle - React, Tailwind, and code Playground

HTML

<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="wrapperWh">
      <div class="alignedLeft static-top col-md-19 col-sm-20 col-xs-24">
        <nav id="mainNavigation" class="navbar navbar-default" navbar-static-top>
          <div class="container-fluid">
              <div class="alignedLeft col-md-7 col-sm-7 col-xs-7">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
              </button>
              <div class="navbar-brand ">
                <img src="images/advance_logo.png" alt=""/>
              </div>  
            </div>
                </div><div class="alignedRight col-md-17 col-sm-17col-xs-17">
            <div class="collapse navbar-collapse" id="navbar-collapse-2">      
              <ul class="nav navbar-nav">
                <li>
                  <a href="">Home</a>
                </li>
                <li> 
                  <a href="">Accident<br>Management</a>
                  <div class="subMainNavigation">
                    <div class="col-md-8 col-sm-8 col-sx-8">
                      <img src="images/kitemark.png" alt=""/>
                    </div>
                    <div class="col-md-6 col-sm-6 col-sx-6">
                      <ul>
                        <li>Download App</li>
                        <li>Accident Helpline</li>
                      </ul>
                    </div>
                    <div class="col-md-10 col-sm-10 col-sx-10"></div>
                  </div>
                </li>
                <li>	
                  <a href="">Approved<br>Manufacturers</a>
              ...

CSS

/*unwanted default Bootstrap*/
.navbar-collapse{
  padding:0;
  margin:0;
}
.navbar-nav {
    width:100%;
    float:none;
    /*displaying inline block makes a little margin*/
    margin-top: 0.1%;
    margin-bottom: 0.1%;
}
.navbar-default {
    border:none;
    margin-bottom: 0;
    border-radius:0;
    box-shadow:none;
}
.navbar-brand {
    padding:0;
}

/*vertical alignment*/
.alignedLeft,
.alignedRight{
    display: inline-block;
    vertical-align: middle;
    height:100%;
    padding:0;
    float:none;
}
/**Main Navigation**/
.wrapperWh {
     background: #ffffff;
}
#mainNavigation {
    background-color: #ffffff;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
    /* relative to the fullSubMainNav*/
    position:relative;
}
#mainNavigation .navbar-brand {
    height: auto; 
    padding:0;
}
#mainNavigation ul li {
    border-right:2px solid red;
    padding:0 2%;
}
#mainNavigation ul li a {
  color:black;
  padding:0;
}
/*for better responsive*/
#mainNavigation li:first-child {
    width:12%;
}
#mainNavigation li:nth-child(2){
    width:20%;
}
#mainNavigation li:nth-child(3){
    width:22%;
}
#mainNavigation li:nth-child(4),
#mainNavigation li:nth-child(5){
    width:15%;
}
#mainNavigation li:last-child {
    width:16%;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/*full subnavigation for mainNavigation*/
#fullSubMainNav {
    width:100%;
    /* absolute to mainNavigation*/
    border:1px solid blue;
    height:50px;
}
/*subnavigation for mainNavigation on hover*/
.activeNav {
    display:block;
}
.subMainNavigation {
    display:none;
}
/*we are styling the subMainNavigation*/
#displaySubmenu ul{
  font-family: "Droid Sans",sans-serif;
  font-weight: 400;
  font-size: 1.2em; 
}
#displaySubmenu ul li{
 list-style:none;
 border-bottom:2px solid #d8d8d8;
 padding: 3% 0;
}
#displaySubmenu ul li:last-child{
 list-style:none;
 border-bottom:none;
}
#displaySubmenu ul...

JavaScript

$("#mainNavigation li").hover(function() {
    $submenu = $(this).toggleClass("activeNav").find(".subMainNavigation").html();
    $("#displaySubmenu").html($submenu);
}, function() {
    $submenu = $(this).find(".subMainNavigation");
    $("#displaySubmenu").css("display", "none");
});

$('#mainNavigation').mouseover(function(){
    $('#displaySubmenu').show();
    $('#mainContent').addClass('curtainBackground');
});

$('.wrapperWh').mouseleave(function(){
     $('#mainContent').removeClass('curtainBackground');
});