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
    $(function () {
    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('.dropdown-menu', this).length) {
            var elm = $('.dropdown-menu', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docW = $(window).width();

            var isEntirelyVisible = (l + w <= docW);

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