Sous-menu déroulant Bootstrap manquant

Bootstrap 3 est toujours à RC, mais j'essayais juste de l'implémenter. Je ne pouvais pas comprendre comment mettre une classe de sous-menu. Même il n'y a pas de classe en CSS et même les nouveaux documents n'en disent rien

Il était là dans 2.x avec le nom de la classe sous-menu déroulant

Mise à jour 2018

Le dropdown-submenua été supprimé dans Bootstrap 3 RC. Dans les mots de l'auteur Bootstrap Mark Otto ..

"Les sous-menus n'ont tout simplement pas beaucoup de place sur le Web en ce moment, en particulier le Web mobile. Ils seront supprimés avec 3.0" - https://github.com/twbs/bootstrap/pull/6342

Mais, avec un peu de CSS supplémentaire, vous pouvez obtenir les mêmes fonctionnalités.

Bootstrap 4 (sous-menu navbar en survol)

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

Survol du menu déroulant du sous-menu Navbar
Survol du menu déroulant du sous-menu Navbar (aligné à droite)
Cliquez sur le menu déroulant du sous-menu Navbar (aligné à droite)
Survol du menu déroulant Navbar (aucun sous-menu)

Bootstrap 3

Voici un exemple qui utilise 3.0 RC 1: http://bootply.com/71520

Voici un exemple qui utilise 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;
}

Exemple de balisage

<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 - Exemple dans la barre de navigation qui ajuste la position gauche: http://bootply.com/92442

La solution @skelly est bonne mais ne fonctionnera pas sur les appareils mobiles car l'état de vol stationnaire ne fonctionnera pas.

J'ai ajouté un peu de JS pour récupérer le comportement BS 2.3.2.

PS: cela fonctionnera avec le CSS que vous y obtenez: http://bootply.com/71520 mais vous pouvez commenter la partie suivante:

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

Le résultat se trouve sur mon thème WordPress (Haut de page): http://shprinkone.julienrenaux.fr/

Jusqu'à aujourd'hui (9 janvier 2014), Bootstrap 3 ne prend toujours pas en charge la liste déroulante des sous-menus.

J'ai cherché sur Google à propos du menu de navigation réactif et j'ai trouvé que c'était le meilleur que je puisse faire.

Ce sont des menus intelligents http://www.smartmenus.org/

J'espère que c'est la sortie pour tous ceux qui veulent un menu de navigation avec un sous-menu à plusieurs niveaux.

mise à jour 2015-02-17 Les menus intelligents prennent désormais entièrement en charge le style d'élément Bootstrap pour le sous-menu. Pour plus d'informations, veuillez consulter le site Web des menus intelligents.

Le code de Shprink m'a le plus aidé, mais pour éviter la liste déroulante de sortir de l'écran, je l'ai mis à jour pour:

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 - la police blanche et le fond clair ne semblaient pas bons.

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

J'espère que cela aide les gens autant que pour moi!

Mais j'espère que Bootstrap ajoutera la fonctionnalité subs dès que possible.

Commentez la solution de contournement vraiment utile de Skelly : dans Bootstrap-sass 3.3.6, utilities.scss, ligne 19: .pull-lefta float:left !important. Depuis, je recommande également d'utiliser! Important dans son CSS:

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

J'ai rencontré ce problème il y a quelques jours. J'ai essayé de nombreuses solutions et aucune n'a vraiment fonctionné pour moi à la fin, j'ai fini par créer une extension / substitution du code déroulant du bootstrap. Il s'agit d'une copie du code d'origine avec des modifications de la fonction closeMenus.

Je pense que c'est une bonne solution car elle n'affecte pas les classes de base de bootstrap js.

Vous pouvez le vérifier sur gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Je fais une autre solution pour le menu déroulant. J'espère que c'est utile Ajoutez simplement ce 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>