JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Mobile friendly bootstrap menu for wordpress</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" id="menu-menu-1"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-155 dropdown" id="menu-item-155"><a href="#" >About us</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157" id="menu-item-157"><a href="http://www.sslghana.org/ver_1/about-us/">About SSL</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156" id="menu-item-156"><a href="http://www.sslghana.org/ver_1/mission-vision/">Mission &amp; Vision</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158" id="menu-item-158"><a href="http://www.sslghana.org/ver_1/air_freight1/">Air Freight</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-72 current_page_item menu-item-83" id="menu-item-83"><a href="http://www.sslghana.org/ver_1/testing-page-3/">Car Rentals</a></li>
<li class="menu-item...

CSS

.dropdown.open > a::after {
    content: "";
}
.dropdown.open .dropdown-menu {
    border:2px solid #eee;
    border-radius:0px;
}
.dropdown > a::after {
    color: #ccc;
    content: "";
    font-family: "Glyphicons Halflings";
    font-size: 7px;
    margin-left: 1%;
}
.navbar a{ text-align:center; }

JavaScript

jQuery( ".menu-item-has-children" ).addClass( "dropdown gmk" );
jQuery( ".menu-item-has-children > a" ).addClass( "dropdown-toggle" );
jQuery( ".menu-item-has-children > a" ).attr( "data-toggle", "dropdown" );
jQuery( ".menu-item-has-children ul" ).addClass( "dropdown-menu" );