Luego de mucho trabajar hemos hallado el arreglo de esta obstáculo que tantos usuarios de este sitio han presentado. Si quieres aportar algún dato puedes aportar tu conocimiento.
Solución:
Actualizado 2018
los dropdown-submenu se ha 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 la 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 del menú desplegable del submenú Navbar
Desplazamiento del menú desplegable del submenú Navbar (alineado a la derecha)
Haga clic en el menú desplegable del submenú de la barra de navegación (alineado a la derecha)
Desplazamiento del menú 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
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 de 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-menudisplay: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 es compatible con el menú desplegable del submenú.
Busqué en Google sobre el menú de navegación receptivo y descubrí que este es el mejor.
Está Menús inteligentes http://www.smartmenus.org/
Espero que esta sea la salida para cualquiera que quiera un menú de navegación con un submenú multinivel.
actualización 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 menús inteligentes.
Comentarios y puntuaciones
Si tienes algún recelo y capacidad de avanzar nuestro sección puedes dejar un paráfrasis y con deseo lo analizaremos.