Sub menu drop-down Bootstrap hilang

Bootstrap 3 masih di RC, tetapi saya hanya mencoba mengimplementasikannya. Saya tidak tahu bagaimana cara menempatkan kelas sub menu. Bahkan tidak ada kelas dalam css dan bahkan dokumen baru tidak mengatakan apa-apa tentang itu

Itu ada di 2.x dengan nama kelas sebagai dropdown-submenu

Diperbarui 2018

The dropdown-submenutelah dihapus di Bootstrap 3 RC. Dalam kata-kata penulis Bootstrap Mark Otto ..

"Submenu tidak memiliki banyak tempat di web saat ini, terutama web seluler. Mereka akan dihapus dengan 3.0" - https://github.com/twbs/bootstrap/pull/6342

Tapi, dengan sedikit CSS ekstra Anda bisa mendapatkan fungsionalitas yang sama.

Bootstrap 4 (submenu navbar saat melayang)

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

Sub-menu Navbar dropdown melayang-layang
Navbar submenu drop-down melayang-layang (kanan disejajarkan)
Navbar klik submenu drop-down (rata kanan)
Navbar drop-down melayang-layang (tidak ada submenu)

Bootstrap 3

Berikut adalah contoh yang menggunakan 3.0 RC 1: http://bootply.com/71520

Berikut adalah contoh yang menggunakan 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 Sampel

<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 - Contoh di navbar yang menyesuaikan posisi kiri: http://bootply.com/92442

@skelly solusi bagus tetapi tidak akan berfungsi pada perangkat seluler karena keadaan hover tidak akan berfungsi.

Saya telah menambahkan sedikit JS untuk mendapatkan kembali perilaku BS 2.3.2.

PS: itu akan bekerja dengan CSS Anda sampai di sana: http://bootply.com/71520 meskipun Anda dapat mengomentari bagian berikut:

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

Hasilnya dapat ditemukan pada tema WordPress saya (Atas halaman): http://shprinkone.julienrenaux.fr/

Hingga hari ini (9 Januari 2014) Bootstrap 3 masih belum mendukung dropdown sub menu.

Saya mencari Google tentang menu navigasi responsif dan menemukan ini adalah yang terbaik.

Ini adalah menu Smart http://www.smartmenus.org/

Saya harap ini jalan keluar bagi siapa saja yang menginginkan menu navigasi dengan sub menu bertingkat.

pembaruan 2015-02-17 Menu cerdas sekarang sepenuhnya mendukung gaya elemen Bootstrap untuk submenu. Untuk informasi lebih lanjut silakan lihat situs web menu Smart.

Kode Shprink paling membantu saya, tetapi untuk menghindari dropdown agar tidak ditampilkan, saya memperbaruinya menjadi:

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 - font putih & latar belakang terang tidak terlihat bagus.

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

Saya harap ini membantu orang sebanyak yang saya lakukan!

Tapi saya harap Bootstrap menambahkan fitur subs kembali ASAP.

Komentar untuk solusi Skelly yang sangat membantu : di Bootstrap-sass 3.3.6, utilities.scss, baris 19: .pull-leftmiliki float:left !important. Karena itu, saya sarankan untuk menggunakan! Penting dalam CSS-nya juga:

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

Saya mengalami masalah ini beberapa hari yang lalu. Saya mencoba banyak solusi dan tidak ada yang benar-benar bekerja untuk saya pada akhirnya saya akhirnya membuat extenion / override dari kode dropdown bootstrap. Ini adalah salinan kode asli dengan perubahan pada fungsi closeMenus.

Saya pikir ini adalah solusi yang baik karena tidak mempengaruhi kelas inti dari js bootstrap.

Anda dapat memeriksanya di gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Saya membuat solusi lain untuk dropdown. Semoga ini bisa membantu. Cukup tambahkan skrip js ini

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