JSFiddle - React, Tailwind, and code Playground
by Swapnil Dubey
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://vsn4ik.github.io/bootstrap-submenu/dist/js/bootstrap-submenu.js"></script>
<link rel="stylesheet" href="https://vsn4ik.github.io/bootstrap-submenu/dist/css/bootstrap-submenu.min.css">
<script src="https://vsn4ik.github.io/bootstrap-submenu/vendor/jquery/js/jquery.js"></script>
<script src="https://vsn4ik.github.io/bootstrap-submenu/vendor/bootstrap/js/bootstrap.js"></script>
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav nav-pills">
<li class="dropdown">
<a class="btn-lg btn-danger" role="button" tabindex="0" data-toggle="dropdown" data-submenu>
<font color="black"> Dropdown 1</font><span class="caret"></span>
</a>
<ul bgcolor="red" class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="0">Action</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Sub action</a></li>
<li class="dropdown-submenu">
<a tabindex="0">Another sub action</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Sub action</a></li>
<li><a tabindex="0">Another sub action</a></li>
<li><a tabindex="0">Something else here</a></li>
</ul>
</li>
<li><a tabindex="0">Something else here</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="0">Another action</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Sub action</a></li>
<li><a tabindex="0">Another sub action</a></li>
<li><a tabindex="0">Something else here</a></li>
</ul>
</li>
<li><a tabindex="0">Something else here</a></li>
<li...
JavaScript
$('[data-submenu]').submenupicker();