JSFiddle - React, Tailwind, and code Playground

by Swapnil Dubey

HTML

<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/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://vsn4ik.github.io/bootstrap-submenu/vendor/bootstrap/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav ">
       <li class="dropdown">
    <a  class="collapse btn-md btn-info" role="button" tabindex="0" data-toggle="dropdown" data-submenu><span>
   Dropdown 1</span>
    </a>

    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a  href="#"   data-toggle="collapse" data-target="#submenu1" >fruit</a>

        <ul class="dropdown-menu" id="submenu1" role="menu" >
          <li><a tabindex="0">Mango</a></li>
          <li class="dropdown-submenu">
            <a href="#"   data-toggle="collapse" data-target="#submenu1.1" aria-expanded="false"tabindex="0">Grapes</a>

            <ul class="dropdown-submenu" id="submenu1.1" role="menu" aria-labelledby="btn-1">
              <li><a tabindex="0">Black</a></li>
              <li><a tabindex="0">Green</a></li>
              <li><a tabindex="0">Yellow</a></li>
            </ul>
          </li>
          <li><a tabindex="0">Apple</a></li>
        </ul>
      </li>
     ...

CSS

.dropdown-menu>li
{	position:relative;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left-color:#fff;
	box-shadow:none;
}
.right-caret:after,.left-caret:after
 {	content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
	margin-left:5px;
}
.right-caret:after
{	border-left: 5px solid #ffaf46;
}
.left-caret:after
{	border-right: 5px solid #ffaf46;
}

JavaScript

$(function(){
	$(".dropdown-menu > li > a.trigger").on("click",function(e){
		var current=$(this).next();
		var grandparent=$(this).parent().parent();
		if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
			$(this).toggleClass('right-caret left-caret');
		grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
		grandparent.find(".sub-menu:visible").not(current).hide();
		current.toggle();
		e.stopPropagation();
	});
	$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
		var root=$(this).closest('.dropdown');
		root.find('.left-caret').toggleClass('right-caret left-caret');
		root.find('.sub-menu:visible').hide();
	});
});