Falta el submenú desplegable Bootstrap

Bootstrap 3 todavía está en RC, pero solo estaba tratando de implementarlo. No pude entender cómo poner una clase de submenú. Incluso no hay clase en CSS e incluso los nuevos documentos no dicen nada al respecto

Estaba allí en 2.x con el nombre de la clase como menú desplegable

Actualizado 2018

Se dropdown-submenuha eliminado en Bootstrap 3 RC. En palabras del autor de Bootstrap Mark Otto ..

"Los submenús simplemente no tienen mucho lugar en la web en este momento, especialmente en la web móvil. Se eliminarán con 3.0" - https://github.com/twbs/bootstrap/pull/6342

Pero, con un poco de CSS adicional, puede obtener la misma funcionalidad.

Bootstrap 4 (submenú de barra de navegación al pasar el mouse)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

Desplazamiento desplegable del submenú de la barra de navegación Desplazamiento desplegable del submenú de la barra de
navegación (alineado a la derecha)
Clic desplegable del submenú de la barra de navegación (alineado a la derecha)
Desplazamiento desplegable de la barra de navegación (sin submenú)

Bootstrap 3

Aquí hay un ejemplo que usa 3.0 RC 1: http://bootply.com/71520

Aquí hay un ejemplo que usa Bootstrap 3.0.0 (final): http://bootply.com/86684

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.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;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

Marcado de muestra

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

PD: ejemplo en la barra de navegación que ajusta la posición izquierda: http://bootply.com/92442

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

He agregado un poco de JS para recuperar el comportamiento BS 2.3.2.

PD: funcionará con el CSS que obtengas 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) Bootstrap 3 todavía no admite el menú desplegable del submenú.

Busqué en Google sobre el menú de navegación receptivo y encontré que este es el mejor que pensé.

Se trata de menús inteligentes http://www.smartmenus.org/

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

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

El código de Shprink me ayudó más, pero para evitar que el menú desplegable salga de la pantalla lo actualicé 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: DE color de fondo: #eeeeee A color de fondo: # c5c5c5 - la fuente blanca y el fondo claro no se veían 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 de subs lo antes posible.

Comente la solución realmente útil de Skelly : en Bootstrap-sass 3.3.6, utilities.scss, línea 19: .pull-lefthas float:left !important. Desde entonces, recomiendo usar! Important en su CSS también:

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

Me topé con este problema hace unos días. Intenté 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 las clases principales de bootstrap js.

Puede verificarlo en gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Hago otra solución para el menú desplegable. Espero que esto sea útil Solo 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>