Falta el submenú desplegable Bootstrap

@skelly la solución es buena, pero no funcionará en dispositivos móviles, ya que el estado de suspensión no funcionará.

He añadido un poco de JS para recuperar el comportamiento BS 2.3.2.

PD: funcionará con el CSS que llegues allí: http://bootply.com/71520 aunque puedes comentar la siguiente parte:

CSS:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

El resultado se puede encontrar en mi tema de WordPress (Parte superior de la página): http://shprinkone.julienrenaux.fr /

Hasta hoy (9 de enero de 2014) el Bootstrap 3 todavía no soporta el menú desplegable del submenú.

Busqué en Google sobre el menú de navegación sensible y encontré que este es el mejor que he pensado.

Es menús Inteligentes http://www.smartmenus.org/

Espero que esta sea la salida para cualquiera que quiera menú de navegación con submenú multinivel.

Actualización 2015-02-17 Los menús inteligentes ahora son totalmente compatibles con el estilo de elemento Bootstrap para submenú. Para obtener más información, consulte Web de menús inteligentes.

El código de Shprink me ayudó más, pero para evitar que el menú desplegable saliera de la pantalla lo actualizé a:

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeeeee TO background-color: #c5c5c5 - white font & light background no se veía bien.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

¡Espero que esto ayude a la gente tanto como lo hizo para mí!

Pero espero que Bootstrap agregue la función subs lo antes posible.

Comentario a La solución realmente útil de Skelly: en Bootstrap-sass 3.3.6, utilidades.scss, línea 19: .pull-left has float:left !important. Desde entonces, recomiendo usar !importante en su CSS también:

.dropdown-submenu.pull-left {
    float:none !important;
}

Me topé con este problema hace unos días. Probé muchas soluciones y ninguna realmente funcionó para mí al final terminé creando una extensión/anulación del código desplegable de bootstrap. Es una copia del código original con cambios en la función closeMenus.

Creo que es una buena solución ya que no afecta a las clases principales de bootstrap js.

Puedes comprobarlo en gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Hago otra solución para el menú desplegable. Espero que esto sea de ayuda Simplemente agregue este script js

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>