JSFiddle - React, Tailwind, and code Playground

by Igor_Ivancha

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <ul class="nav nav-tabs pull-left">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="myClass" href="#">Menu 1</a>
      <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>
      </ul>
    </li>
    
  </ul>
  <ul class="nav nav-tabs pull-right">
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

CSS

.nav>li>a.myClass {
  display: inline-block;
  padding: 10px 0 10px 10px;
}
.nav>li>a.dropdown-toggle.myClass {
  display: inline-block;
  padding: 10px 0;
}
.nav .open>a.myClass {
  border: 1px solid #ddd;
  background-color: #fff;
}