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://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="menu-container keep-open">
  <ul id="primary-menu" aria-expanded="false">
    <li class="menu-item">
      <a href="#">Menu 1</a>
    </li>
    <li class="menu-item current-menu-parent dropdown">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">
				Menu 2 <span class="caret"></span>
			</a>
      <ul role="menu" class="dropdown-menu">
        <li class="menu-item current-menu-item active">
          <a href="#">Submenu 2a</a>
        </li>
        <li class="menu-item">
          <a href="#">Submnenu 2b</a>
        </li>
      </ul>
    </li>
    <li class="menu-item dropdown">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">
        Menu 3 <span class="caret"></span>
      </a>
      <ul role="menu" class="dropdown-menu">
        <li class="menu-item">
          <a href="#">Submenu 3a</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

#primary-menu > li {
  display: inline-block;
  margin-right: 30px;
  margin-top: 30px;
}

JavaScript

// To open active submenu on load
jQuery('.keep-open').find('.current-menu-item').closest('.current-menu-parent').children('.dropdown-toggle').trigger('click');

// To prevent submenu from being closed on outside click
jQuery('.current-menu-parent').on('hide.bs.dropdown', function() {
  return false;
});
// Hide dropdown when click menuItem
jQuery('.current-menu-parent').bind('click', function() {
		$(this).find('ul').fadeOut();
});