JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Item 1</li>
      <li>
<div class="dropdown">
  <div data-toggle="dropdown">I have a submenu</div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul></li>
  </ul>
</div>
      </li>
      <li>Item 3</li>
  </ul>
</div>

CSS

.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin: 0;
padding: 0;
}

JavaScript

$(document).ready(function(){
         $('.dropdown .dropdown').each(function(){
             var $self = $(this);
             var handle = $self.children('[data-toggle="dropdown"]');
             $(handle).click(function(){
                 var submenu = $self.children('.dropdown-menu');
                 $(submenu).toggle();
                 return false;
             });
         });
     });