title: Bootstrap 3 Drop Up Menu with sub-menus
body: <p>The html, css and javascript shown below is working flawlessly with Bootstrap 3.3.4 using jquery 1.9.1.js. When it's placed in a page running Bootstrap 3.0.0 using query 1.10.2.js, the menu opens, but when the item with sub-menus is clicked the menu collapses. Any suggestions? Thanks.</p>
  
  <p>HTML</p>
  
  <blockquote>
  <pre><code>  &lt;div class="col-sm-4"&gt;          &lt;h3 class="header-title"&gt;Navigation&lt;/h3&gt;
        &lt;span class="line"&gt;&lt;/span&gt;      &lt;div class="dropup m-b"&gt;            &lt;button
  </code></pre>
    
    <p>class="btn btn-success" type="button" data-toggle="dropdown">         Menu
                                <li>Action</li>                  Another action     
          Dropdown header</li>        <li>Sub action</li>      Another sub action</li>      <li>Something else here</li>        </li>       <li>Something else here</li>         </li>
          <li>Separated link</li>              </p>
  </blockquote>
  
  <p>CSS</p>
  
  <blockquote>
    <p>.dropdown-submenu > a:after {   content: "";   float: right;<br>
    margin-right: -10px; } @media (min-width: 768px) {   .dropdown-submenu
    {
        position: relative;   }   .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        border-top-left-radius: 0;   }   .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 {
        left: auto;
        right: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 0;   }   .dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu,   .navbar-fixed-bottom
    .dropdown-menu-right .dropdown-submenu .dropdown-menu {
        border-radius: 4px 4px 0;   }   .dropdown-submenu > a:after {
        margin-top: 6px;
        border-left: 4px dashed;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;   }   .dropdown-menu-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-top: 8px;
        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 >
    .dropdown-menu > li.dropdown-header,   .btn-group > .dropdown-menu >
    .dropdown-submenu > .dropdown-menu > li.dropdown-header,   .dropdown >
    .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a,<br>
    .dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li >
    a,   .btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu</p>
    
    <blockquote>
      <p>li > a {
          padding-left: 30px;   }   .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu >
      li.dropdown-header,   .dropup > .dropdown-menu > .dropdown-submenu >
      .dropdown-menu > li > .dropdown-menu > li.dropdown-header,<br>
      .btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li
      .dropdown-menu > li.dropdown-header,   .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a,<br>
      .dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li >
      .dropdown-menu > li > a,   .btn-group > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a {
          padding-left: 40px;   }   .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li.dropdown-header,   .dropup > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li.dropdown-header,   .btn-group > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li.dropdown-header,   .dropdown > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > a,   .dropup > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > a,   .btn-group > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > a {
          padding-left: 50px;   }   .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > .dropdown-menu > li.dropdown-header,   .dropup >
      .dropdown-menu > .dropdown-submenu > .dropdown-menu > li >
      .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu >
      li.dropdown-header,   .btn-group > .dropdown-menu > .dropdown-submenu
      .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,   .dropdown > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > .dropdown-menu > li > a,   .dropup >
      .dropdown-menu > .dropdown-submenu > .dropdown-menu > li >
      .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,<br>
      .btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li
      .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
          padding-left: 60px;   }   .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,   .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu >
      .dropdown-menu > li > a {
          padding-left: 35px;   }   .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,   .navbar-nav > .dropdown > .dropdown-menu >
      .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a {
          padding-left: 45px;   }   .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,   .navbar-nav > .dropdown >
      .dropdown-menu > .dropdown-submenu > .dropdown-menu > li >
      .dropdown-menu > li > .dropdown-menu > li > a {
          padding-left: 55px;   }   .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,<br>
      .navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu >
      .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li >
      .dropdown-menu > li > a {
          padding-left: 65px;   } }</p>
    </blockquote>
  </blockquote>
  
  <p>jQuery</p>
  
  <blockquote>
    <p>'use strict';</p>
    
    <p>(function(factory) {   if (typeof define == 'function' &amp;&amp; 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($) {   var desc = ':not(.disabled, .divider, .dropdown-header)';</p>
    
    <p>function Submenupicker(element) {
        this.$element = $(element);
        this.$main = this.$element.closest('.dropdown, .dropup, .btn-group');
        this.$menu = this.$element.parent();
        this.$drop = this.$menu.parent().parent();
        this.$menus = this.$menu.siblings('.dropdown-submenu');</p>
  
  <pre><code>var $children = this.$menu.find('&gt; .dropdown-menu &gt; ' + desc);
  
  this.$submenus = $children.filter('.dropdown-submenu');
  this.$items = $children.not('.dropdown-submenu');
  
  this.init();   }
  </code></pre>
    
    <p>Submenupicker.prototype = {
        init: function() {
          this.$element.on('click.bs.dropdown', this.click.bind(this));
          this.$element.keydown(this.keydown.bind(this));
          this.$menu.on('hide.bs.submenu', this.hide.bind(this));
          this.$items.keydown(this.item_keydown.bind(this));</p>
  
  <pre><code>  // Bootstrap fix
    this.$menu.nextAll(desc + ':first:not(.dropdown-submenu)').children('a').keydown(this.next_keydown.bind(this));
  },
  click: function(event) {
    event.stopPropagation();
  
    this.toggle();
  },
  toggle: function() {
    if (this.$menu.hasClass('open')) {
      this.close();
    }
    else {
      this.$menu.addClass('open');
      this.$menus.trigger('hide.bs.submenu');
    }
  },
  hide: function(event) {
    // Stop event bubbling
    event.stopPropagation();
  
    this.close();
  },
  close: function() {
    this.$menu.removeClass('open');
    this.$submenus.trigger('hide.bs.submenu');
  },
  keydown: function(event) {
    // 13: Return, 27: Esc, 32: Spacebar
    // 38: Arrow up, 40: Arrow down
  
    // Off vertical scrolling
    if (/^(32|38|40)$/.test(event.keyCode)) {
      event.preventDefault();
    }
  
    if (/^(13|32)$/.test(event.keyCode)) {
      this.toggle();
    }
    else if (/^(27|38|40)$/.test(event.keyCode)) {
      event.stopPropagation();
  
      if (event.keyCode == 27) {
        if (this.$menu.hasClass('open')) {
          this.close();
        }
        else {
          this.$menus.trigger('hide.bs.submenu');
          this.$drop.removeClass('open').children('a').focus();
        }
      }
      else {
        var $items = this.$main.find('li:not(.disabled):visible &gt; a');
  
        var index = $items.index(event.target);
  
        if (event.keyCode == 38 &amp;&amp; index !== 0) {
          index--;
        }
        else if (event.keyCode == 40 &amp;&amp; index !== $items.length - 1) {
          index++;
        }
        else {
          return;
        }
  
        $items.eq(index).focus();
      }
    }
  },
  item_keydown: function(event) {
    // 27: Esc
  
    if (event.keyCode != 27) {
      return;
    }
  
    event.stopPropagation();
  
    this.close();
    this.$element.focus();
  },
  next_keydown: function(event) {
    // 38: Arrow up
  
    if (event.keyCode != 38) {
      return;
    }
  
    // Off vertical scrolling
    event.preventDefault();
  
    event.stopPropagation();
  
    // Use this.$drop instead this.$main (optimally)
    var $items = this.$drop.find('li:not(.disabled):visible &gt; a');
  
    var index = $items.index(event.target);
  
    $items.eq(index - 1).focus();
  }   };
  </code></pre>
    
    <p>// For AMD/Node/CommonJS used elements (optional)   //
    <a href="http://learn.jquery.com/jquery-ui/environments/amd/" rel="nofollow">http://learn.jquery.com/jquery-ui/environments/amd/</a>   return
    ($.fn.submenupicker = function(elements) {
        var $elements = this instanceof $ ? this : $(elements);</p>
  
  <pre><code>return $elements.each(function() {
    var data = $.data(this, 'bs.submenu');
  
    if (!data) {
      data = new Submenupicker(this);
  
      $.data(this, 'bs.submenu', data);
    }
  });   }); });
  </code></pre>
  </blockquote>