Sottomenu a discesa Bootstrap mancante

Bootstrap 3 è ancora in RC, ma stavo solo cercando di implementarlo. Non sono riuscito a capire come mettere una classe di sottomenu. Anche in css non esiste una classe e anche i nuovi documenti non ne parlano

Era lì in 2.x con il nome della classe come sottomenu a discesa

Aggiornato 2018

Il file dropdown-submenuè stato rimosso in Bootstrap 3 RC. Nelle parole dell'autore Bootstrap Mark Otto ..

"I sottomenu non hanno molto spazio sul web in questo momento, specialmente il web mobile. Saranno rimossi con 3.0" - https://github.com/twbs/bootstrap/pull/6342

Ma con un po 'di CSS in più puoi ottenere la stessa funzionalità.

Bootstrap 4 (sottomenu della barra di navigazione al passaggio del 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;
}

Passaggio del menu a discesa del sottomenu della barra di navigazione Passaggio del menu a discesa del sottomenu della barra di
navigazione (allineato a destra)
Clic del menu a discesa del sottomenu della barra di navigazione (allineato a destra)
Passaggio del menu a discesa del menu di navigazione (nessun sottomenu)

Bootstrap 3

Ecco un esempio che utilizza 3.0 RC 1: http://bootply.com/71520

Ecco un esempio che utilizza 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;
}

Markup di esempio

<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>

PS - Esempio in barra di navigazione che regola la posizione a sinistra: http://bootply.com/92442

La soluzione @skelly è buona ma non funziona sui dispositivi mobili poiché lo stato al passaggio del mouse non funziona.

Ho aggiunto un po 'di JS per ripristinare il comportamento di BS 2.3.2.

PS: funzionerà con il CSS che ci arrivi: http://bootply.com/71520 anche se puoi commentare la parte seguente:

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');
});

Il risultato può essere trovato sul mio tema WordPress (inizio pagina): http://shprinkone.julienrenaux.fr/

Fino ad oggi (9 gennaio 2014) Bootstrap 3 non supporta ancora il menu a discesa del sottomenu.

Ho cercato su Google il menu di navigazione reattivo e ho scoperto che questo è il migliore che abbia pensato.

Sono i menu intelligenti http://www.smartmenus.org/

Spero che questa sia la via d'uscita per chiunque desideri un menu di navigazione con sottomenu multilivello.

aggiornamento 17-02-2015 I menu intelligenti ora supportano completamente lo stile dell'elemento Bootstrap per il sottomenu. Per ulteriori informazioni, consultare il sito Web dei menu intelligenti.

Il codice di Shprink mi ha aiutato di più, ma per evitare che il menu a discesa andasse fuori schermo l'ho aggiornato in:

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: DA background-color: #eeeeee TO background-color: # c5c5c5 - il carattere bianco e lo sfondo chiaro non stavano bene.

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

Spero che questo aiuti le persone tanto quanto ha fatto per me!

Ma spero che Bootstrap aggiunga la funzionalità dei sottotitoli appena possibile.

Commenta la soluzione davvero utile di Skelly : in Bootstrap-sass 3.3.6, utilities.scss, linea 19: .pull-lefthas float:left !important. Da allora, consiglio di usare! Important anche nel suo CSS:

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

Ho riscontrato questo problema alcuni giorni fa. Ho provato molte soluzioni e nessuna ha funzionato davvero per me alla fine ho finito per creare un ampliamento / override del codice a discesa di bootstrap. È una copia del codice originale con modifiche alla funzione closeMenus.

Penso che sia una buona soluzione poiché non influenza le classi principali di bootstrap js.

Puoi verificarlo su gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Faccio un'altra soluzione per il menu a discesa. Spero che questo sia utile. Basta aggiungere questo 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>