Cara membuat dropdown menu Bootstrap Twitter di hover daripada klik

Saya ingin agar menu Bootstrap saya turun secara otomatis saat mengarahkan kursor, daripada harus mengklik judul menu. Saya juga ingin kehilangan panah kecil di sebelah judul menu.

Saya membuat menu drop-down murni saat melayang berdasarkan kerangka kerja Bootstrap (v2.0.2) terbaru yang memiliki dukungan untuk beberapa submenu dan berpikir saya akan mempostingnya untuk pengguna di masa mendatang:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Demo

Untuk mendapatkan menu agar secara otomatis drop pada hover maka ini dapat dicapai dengan menggunakan CSS dasar. Anda perlu menentukan pemilih untuk opsi menu yang tersembunyi dan kemudian mengaturnya untuk ditampilkan sebagai blok ketika litag yang sesuai diletakkan di atas. Mengambil contoh dari halaman bootstrap twitter, pemilihnya adalah sebagai berikut:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Namun, jika Anda menggunakan fitur responsif Bootstrap, Anda tidak akan menginginkan fungsi ini di navbar yang diciutkan (pada layar yang lebih kecil). Untuk menghindari ini, bungkus kode di atas dalam kueri media:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Untuk menyembunyikan panah (tanda sisipan) ini dilakukan dengan berbagai cara tergantung pada apakah Anda menggunakan Twitter Bootstrap versi 2 dan lebih rendah atau versi 3:

Bootstrap 3

Untuk menghapus tanda sisipan di versi 3 Anda hanya perlu menghapus HTML <b class="caret"></b>dari .dropdown-toggleelemen jangkar:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lebih rendah

Untuk menghapus tanda sisipan di versi 2 Anda perlu sedikit lebih banyak wawasan tentang CSS dan saya sarankan melihat bagaimana :afterelemen pseudo bekerja lebih detail. Untuk membantu Anda memulai cara memahami, menargetkan, dan menghapus panah dalam contoh bootstrap twitter, Anda akan menggunakan pemilih dan kode CSS berikut:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Ini akan menguntungkan Anda jika Anda melihat lebih jauh bagaimana ini bekerja dan tidak hanya menggunakan jawaban yang saya berikan kepada Anda.

Terima kasih kepada @CocaAkat karena telah menunjukkan bahwa kami melewatkan kombinasi anak ">" untuk mencegah sub-menu ditampilkan pada induk kursor

Selain jawaban dari "My Head Hurts" (yang hebat):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Ada 2 masalah yang tersisa:

1. Mengklik tautan dropdown akan membuka menu dropdown. Dan itu akan tetap terbuka kecuali pengguna mengklik di tempat lain, atau mengarahkan kembali di atasnya, menciptakan UI yang canggung.
2. Ada margin 1px antara tautan dropdown, dan menu dropdown. Ini menyebabkan menu dropdown menjadi tersembunyi jika Anda bergerak perlahan antara menu dropdown dan dropdown.

Solusi untuk (1) adalah menghapus elemen "class" dan "data-toggle" dari tautan nav

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Ini juga memberi Anda kemampuan untuk membuat tautan ke halaman induk Anda - yang tidak mungkin dilakukan dengan penerapan default. Anda bisa mengganti "#" dengan halaman apa pun yang ingin Anda kirimi pengguna.

Solusi untuk (2) adalah menghapus margin-top pada pemilih .dropdown-menu

.navbar .dropdown-menu {
    margin-top: 0px;
}

Saya telah menggunakan sedikit jQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Ada banyak solusi yang sangat bagus di sini. Tetapi saya berpikir bahwa saya akan melanjutkan dan menempatkan milik saya di sini sebagai alternatif lain. Itu hanya potongan jQuery sederhana yang melakukan seperti bootstrap jika didukung melayang-layang untuk dropdown bukan hanya klik. Saya hanya menguji ini dengan versi 3 jadi saya tidak tahu apakah itu akan berfungsi dengan versi 2. Simpan sebagai potongan di editor Anda dan memilikinya di ujung tombol.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Pada dasarnya, ini hanya mengatakan ketika Anda membawa kelas dropdown, itu akan menambah kelas terbuka untuk itu. Maka itu hanya bekerja. Ketika Anda berhenti melayang di antara kedua induk li dengan kelas dropdown atau anak-anak, itu menghapus kelas terbuka. Jelas, ini hanya salah satu dari banyak solusi, dan Anda dapat menambahkannya untuk membuatnya bekerja hanya pada contoh spesifik dari dropdown. Atau tambahkan transisi ke orang tua atau anak.

Cukup sesuaikan gaya CSS Anda dalam tiga baris kode

.dropdown:hover .dropdown-menu {
   display: block;
}

Jika Anda memiliki elemen dengan dropdownkelas seperti ini (misalnya):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Kemudian Anda dapat memiliki menu tarik-turun untuk secara otomatis drop-down di atas, daripada harus mengklik judulnya, dengan menggunakan potongan kode jQuery ini:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Ini demo

Jawaban ini mengandalkan jawaban @Michael , saya telah membuat beberapa perubahan dan menambahkan beberapa tambahan untuk membuat menu dropdown berfungsi dengan baik

[Perbarui] Pengaya ada di GitHub dan saya sedang mengerjakan beberapa perbaikan (seperti hanya menggunakan dengan atribut data (tidak perlu JS). Saya telah meninggalkan kode di bawah, tetapi tidak sama dengan apa yang ada di GitHub.

Saya menyukai versi murni CSS, tetapi senang memiliki penundaan sebelum ditutup, karena biasanya pengalaman pengguna yang lebih baik (yaitu tidak dihukum karena slip mouse yang berjalan 1 px di luar dropdown, dll), dan seperti yang disebutkan dalam komentar , ada margin 1px yang harus Anda hadapi atau kadang-kadang nav ditutup secara tidak terduga ketika Anda pindah ke dropdown dari tombol asli, dll.

Saya membuat plugin kecil cepat yang saya gunakan di beberapa situs dan bekerja dengan baik. Setiap item nav ditangani secara independen, sehingga mereka memiliki timer keterlambatan mereka sendiri, dll.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

The delayparameter cukup jelas, daninstantlyCloseOthers langsung akan menutup semua dropdown lainnya yang terbuka ketika Anda hover atas yang baru.

Bukan CSS murni, tapi semoga akan membantu orang lain pada jam selarut ini (yaitu ini adalah utas lama).

Jika Anda mau, Anda dapat melihat berbagai proses yang saya lalui (dalam diskusi tentang #concrete5IRC) untuk membuatnya bekerja melalui langkah-langkah berbeda dalam inti ini: https://gist.github.com/3876924

Pendekatan pola plugin jauh lebih bersih untuk mendukung penghitung waktu individual, dll.

Lihat posting blog untuk lebih lanjut.

Ini bekerja untuk saya:

.dropdown:hover .dropdown-menu {
    display: block;
}

Ini dibangun ke dalam Bootstrap 3. Cukup tambahkan ini ke CSS Anda:

.dropdown:hover .dropdown-menu {
    display: block;
}

Bahkan lebih baik dengan jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Anda dapat menggunakan $().dropdown('toggle')metode default untuk beralih menu dropdown di hover:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Hanya ingin menambahkan, bahwa jika Anda memiliki beberapa dropdown (seperti yang saya lakukan), Anda harus menulis:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Dan itu akan bekerja dengan baik.

Menurut pendapat saya, cara terbaik adalah seperti ini:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Markup sampel:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Cara terbaik untuk melakukannya adalah dengan hanya memicu acara klik Bootstrap dengan hover. Dengan cara ini, perangkat itu harus tetap ramah sentuhan.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Saya sudah mengaturnya sebagai berikut:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Saya harap ini membantu seseorang ...

Juga menambahkan margin-top: 0 untuk mengatur ulang bootstrap css margin untuk. Dropdown-menu sehingga daftar menu tidak hilang ketika pengguna melayang perlahan dari menu drop down ke daftar menu.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}

Ini mungkin ide yang bodoh, tetapi untuk menghapus panah yang mengarah ke bawah, Anda dapat menghapus

<b class="caret"></b>

Ini tidak melakukan apa pun untuk yang menunjuk ke atas, meskipun ...

Saya telah menerbitkan plugin yang tepat untuk fungsionalitas drop-down Bootstrap 3, di mana Anda bahkan dapat menentukan apa yang terjadi ketika mengklik dropdown-toggleelemen (klik dapat dinonaktifkan):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Mengapa saya membuatnya ketika ada banyak solusi?

Saya memiliki masalah dengan semua solusi yang ada sebelumnya. CSS sederhana tidak menggunakan .openkelas pada .dropdown, jadi tidak akan ada umpan balik pada elemen sakelar drop-down ketika drop-down terlihat.

Js yang mengganggu mengklik .dropdown-toggle , sehingga dropdown muncul di hover, kemudian menyembunyikannya saat mengklik drop-down yang terbuka, dan memindahkan mouse akan memicu drop-down untuk muncul lagi. Beberapa solusi js merusak kompatibilitas iOS, beberapa plugin tidak berfungsi pada browser desktop modern yang mendukung acara sentuh.

Itu sebabnya saya membuat plugin Bootstrap Dropdown Hover yang mencegah semua masalah ini hanya dengan menggunakan API javascript Bootstrap standar, tanpa peretasan apa pun . Bahkan atribut Aria bekerja dengan baik dengan plugin ini.

Gunakan kode ini untuk membuka submenu di mousehover (hanya desktop):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

Dan jika Anda ingin menu tingkat pertama diklik, bahkan di seluler tambahkan ini:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

Submenu (menu tarik-turun) akan dibuka dengan mousehover di desktop, dan dengan klik / sentuh pada ponsel dan tablet. Setelah submenu terbuka, klik kedua akan memungkinkan Anda membuka tautan. Berkat if ($(window).width() > 767), submenu akan mengambil lebar layar penuh di ponsel.

$('.dropdown').hover(function(e){$(this).addClass('open')})

Ini akan menyembunyikan yang naik

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Ini harus menyembunyikan drop down dan caret mereka jika lebih kecil dari tablet.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

Solusi jQuery bagus, tetapi perlu menangani peristiwa klik (untuk ponsel atau tablet) karena hover tidak akan berfungsi dengan baik ... Mungkin bisa melakukan deteksi ukuran jendela kembali?

Jawaban Andres Ilich tampaknya bekerja dengan baik, tetapi harus dibungkus dengan kueri media:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

Solusi yang sangat sederhana untuk versi 2, hanya CSS. Menjaga fungsi ramah yang sama untuk seluler dan tablet.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Timpa bootstrap.js dengan skrip ini.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

Inilah teknik saya yang menambahkan sedikit keterlambatan sebelum menu ditutup setelah Anda berhenti melayang-layang di menu atau tombol sakelar. Yang <button>biasanya Anda klik untuk menampilkan menu nav adalah #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Untuk meningkatkan jawaban Sudharshan , saya membungkus ini dalam kueri media untuk mencegah melayang ketika pada lebar tampilan XS ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Karet dalam markup tidak diperlukan, hanya kelas dropdown untuk li .

Ini berfungsi untuk WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Jadi, Anda memiliki kode ini:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Biasanya ini berfungsi pada acara klik, dan Anda ingin itu berfungsi pada acara hover. Ini sangat sederhana, cukup gunakan kode JavaScript / jQuery ini:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Ini bekerja dengan sangat baik dan inilah penjelasannya: kami memiliki tombol, dan menu. Ketika kami mengarahkan tombol, kami menampilkan menu, dan ketika kami keluar dari tombol, kami menyembunyikan menu setelah 100 ms. Jika Anda bertanya-tanya mengapa saya menggunakannya, itu karena Anda perlu waktu untuk menarik kursor dari tombol di atas menu. Ketika Anda berada di menu, waktu diatur ulang dan Anda dapat tetap di sana sebanyak yang Anda inginkan. Saat Anda keluar dari menu, kami akan menyembunyikan menu secara instan tanpa batas waktu.

Saya telah menggunakan kode ini di banyak proyek, jika Anda menemui masalah dalam menggunakannya, jangan ragu untuk bertanya kepada saya.