JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<nav id="menu" class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

CSS

.dropdown-menu{margin-top: -2px; }
li.dropdown .dropdown-menu .dropdown-menu{left:100%; margin-top:-30px;}
.dropdown-reverse{left:auto!important; right:100%!important;}

JavaScript

// dropdown menu on hover 
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {
																		
			$(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
			$(this).bind('mouseleave', function() {

				$(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
		});});
    
    //Change position for drop down
    $('.dropdown-menu').each(function() {
		var menu = $('#menu').offset();
		var dropdown = $(this).parent().offset();
		var docW = $("#menu").width();

		var i = (dropdown.left + $(this).width()) > (docW);

		if (!i) {
			$(this).addClass('dropdown-reverse');
		} else {
			$(this).removeClass('dropdown-reverse');
		}
	});