JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<body>
    <div class="menu-wrap yamm">
        <ul class="nav nav-pills">
            <li role="presentation" class="dropdown "> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </a>

                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">level 1</a> 
                    </li>
                    <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">level 2</a>

                        <ul class="dropdown-menu">
                            <li><a href="#">Second level</a>

                            </li>
                            <li><a href="#">Second level</a>

                            </li>
                            <li><a href="#">Second level</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Another action</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li role="presentation"><a href="#"><span class="glyphicon glyphicon-bell"></span></a>

            </li>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row"></div>
    </div>

CSS

body {
    background-color: #E1EBF2;
}
.menu-wrap {
    position: fixed;
    top: -6px;
    right: 0px;
    z-index: 999;
    width: auto;
    font-size: 14px;
    background: white;
}
.menu-wrap .nav > li > a {
    position: relative;
    display: block;
    font-size: 15px;
}
.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #FF5;
}
.nav-pills > li > a {
    border-radius: 0px;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100%;
    width: 30em;
    text-align:center;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 0px 0px 0px 6px;
}
.dropdown-submenu>a:after {
    display: block;
    content:" ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}
/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 */
 .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
    position: static;
}
.yamm .container {
    position: relative;
}
.yamm .dropdown-menu {
    left: auto;
}
.yamm .yamm-content {
    padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
    left: 0;
    right: 0;
}

JavaScript

$(function () {
       $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {

           event.preventDefault();
           event.stopPropagation();
           $(this).parent().toggleClass('open');


       });

   });