JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navigation">
    <nav class="navbar navbar-default">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav firstNav" id="general-navigation">
                <li class="dropdown">
                    <a href="#" tabindex="1" data-toggle="dropdown" data-submenu="">LEVEL 1</a>
                    <ul class="dropdown-menu secondNav">
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="2">LEVEL 2</a>
                            <ul class="dropdown-menu thirdNav">
                                <li>
                                    <a href="#" tabindex="3">LEVEL 3</a>
                                </li>
                                <li>
                                    <a href="#" tabindex="32">LEVEL 3 -2</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="2">LEVEL 2</a>
                            <ul class="dropdown-menu thirdNav">
                                <li>
                                    <a href="#" tabindex="3">LEVEL 3</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="2">LEVEL 2</a>
                            <ul class="dropdown-menu thirdNav">
                                <li>
                                    <a href="#" tabindex="3">LEVEL 3</a>
                  ...

CSS

/*!
* Bootstrap-submenu v2.0.2 (http://vsn4ik.github.io/bootstrap-submenu)
* Copyright 2015 Vasily A. (https://github.com/vsn4ik)
* Licensed under the MIT license
*/




.dropdown-submenu > a:after {
content: "";
}
@media (min-width: 768px) {
.dropdown-submenu {

}
.dropdown-submenu .dropdown-menu {
top: 0px;
left: 100%;
margin-top: 0;
border-top-left-radius: 0;
position:absolute;
height: 100%;
}
.dropup .dropdown-submenu .dropdown-menu,
.navbar-fixed-bottom .dropdown-submenu .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 0;
}
.dropdown-menu-right .dropdown-submenu .dropdown-menu,
.navbar-right .dropdown-submenu .dropdown-menu {
left: auto;
right: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 0;
}
.dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu,
.dropup .navbar-right .dropdown-submenu .dropdown-menu,
.navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu,
.navbar-fixed-bottom .navbar-right .dropdown-submenu .dropdown-menu {
border-radius: 4px 4px 0;
}
.dropdown-submenu > a:after {
float: right;
margin-top: 6px;
margin-right: -10px;
border-left: 4px dashed;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.dropdown-menu-right .dropdown-submenu > a:after,
.navbar-right .dropdown-submenu > a:after {
float: left;
border-left: none;
margin-left: -10px;
margin-right: 0;
border-right: 4px dashed;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
}
@media (max-width: 767px) {
.dropdown-submenu .dropdown-menu {
position: static;
margin-top: 0;
border: 0;
box-shadow: none;
}
.dropdown-submenu > a:after {
margin-left: 6px;
display: inline-block;
vertical-align: middle;
border-top: 4px dashed;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,
.dropup > .dropdown-menu > .dropdown-submenu...

JavaScript

/*!
 * Bootstrap-submenu v2.0.2 (http://vsn4ik.github.io/bootstrap-submenu)
 * Copyright 2015 Vasily A. (https://github.com/vsn4ik)
 * Licensed under the MIT license
 */

/**
 * $.inArray: friends with IE8. Use Array.prototype.indexOf in future.
 * $.proxy: friends with IE8. Use Function.prototype.bind in future.
 */

'use strict';

(function(factory) {
  if (typeof define == 'function' && define.amd) {
    // AMD. Register as an anonymous module
    define(['jquery'], factory);
  }
  else if (typeof exports == 'object') {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  }
  else {
    // Browser globals
    factory(jQuery);
  }
})(function($) {
  function Item(element) {
    this.$element = $(element);
    this.$menu = this.$element.closest('.dropdown-menu');
    this.$main = this.$menu.parent();
    this.$items = this.$menu.children('.dropdown-submenu');

    this.init();
  }

  Item.prototype = {
    init: function() {
      this.$element.on('keydown', $.proxy(this, 'keydown'));
    },
    close: function() {
      this.$main.removeClass('open');
      this.$items.trigger('hide.bs.submenu');
    },
    keydown: function(event) {
      // 27: Esc

      if (event.keyCode == 27) {
        event.stopPropagation();

        this.close();
        this.$main.children('a, button').trigger('focus');
      }
    }
  };

  function SubmenuItem(element) {
    this.$element = $(element);
    this.$main = this.$element.parent();
    this.$menu = this.$main.children('.dropdown-menu');
    this.$subs = this.$main.siblings('.dropdown-submenu');
    this.$items = this.$menu.children('.dropdown-submenu');

    this.init();
  }

  $.extend(SubmenuItem.prototype, Item.prototype, {
    init: function() {
      this.$element.on({
        click: $.proxy(this, 'click'),
        keydown: $.proxy(this, 'keydown')
      });

      this.$main.on('hide.bs.submenu', $.proxy(this, 'hide'));
    },
    click: function(event) {
      // Fix a[href="#"]. For community
  ...