JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/pwarelis/Ajax-Typeahead/master/typeahead.js"></script>
<ul class="nav nav-pills">
    <li class="dropdown">
        <a class="dropdown-toggle" data-multimenu href="#menu1"> Sweet <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">No menu here</a></li>
            <li>
                <a href="#submenu1"><i class="sub"></i>Submenu present</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                </ul>
            </li>
            <li>
                <a href="#submenu1"><i class="sub"></i>Another one here</a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Sub sub menu</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Go deep..</a></li>
                            <li><a href="#">it's recursive, brah!</a></li>
                        </ul>
                        </li>
                    <li><a href="#">Not a menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.open + .dropdown-menu {
     display: block !important;
 }
 
 .dropdown-menu .open {
     background-color: #0088CC;
     color: #FFFFFF;
     text-decoration: none;
 }
 .dropdown-toggle.open, .dropdown-toggle:hover {
     background-color: #999 !important;
     border-color: #999;
     color: #FFF;
 }

JavaScript

!function($){
 
     "use strict"; // jshint ;_;
 
     var MultiMenu = function (element, options) {
         this.$element = $(element)
         this.$panel = this.$element.next();
         this.options = $.extend({}, $.fn.multimenu.defaults, options)
         this.timer = null;
         this.isSubMultiMenu = this.$element.attr("data-multimenu") === undefined;
         this.listen()
     }
 
     MultiMenu.prototype = {
         sticky: false,
             
         listen: function () {
             this.$element.on("mouseenter.multimenu", $.proxy(this.show, this));
             this.$element.parent().on("mouseleave.multimenu", $.proxy(this.hideDelay, this));
             this.$panel.on("click.multimenu", $.proxy(this.hideAll, this));
             
             // Go through the links in this multimenu and recursively apply
             // the MultiMenu to each one that has <ul> after it
             var links = this.$element.next().children().find("a:first");
             var options = this.options;
             links.each(function(i, el) {
                 var menu = $(el).next("ul.dropdown-menu");
                 if (menu.length) {
                     $(el).multimenu(options);
                     menu.css({ position: "absolute", top: 0 });
                 }
             });
         },
         
         show: function() {
             if (this.sticky) return;
             if (this.timer) clearTimeout(this.timer);
             if (this.$element.hasClass("open")) return;
             this.$element.addClass("open")
             
             var list = this.$element.next();
             if (this.isSubMultiMenu) {
                 list.css({
                     left: this.$element.outerWidth(),
                     top: this.$element.position().top
                 });
             }
         },
         
         hideDelay: function() {
             if (this.sticky) return;
 //            if (this.timer) clearTimeout(this.timer);
 //           ...