So erstellen Sie ein Dropdown-Menü für das Twitter-Bootstrap-Menü beim Hover anstatt beim Klicken

Ich möchte, dass mein Bootstrap-Menü beim Hover automatisch herunterfällt, anstatt auf den Menütitel klicken zu müssen. Ich möchte auch die kleinen Pfeile neben den Menütiteln verlieren.

Ich habe ein reines Dropdown-Menü für den Schwebeflug erstellt, das auf dem neuesten (v2.0.2) Bootstrap-Framework basiert und mehrere Untermenüs unterstützt, und dachte, ich würde es für zukünftige Benutzer veröffentlichen:

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

Damit das Menü beim Hover automatisch abfällt, kann dies mit einfachem CSS erreicht werden. Sie müssen den Selektor auf die ausgeblendete Menüoption einstellen und ihn dann so einstellen, dass er als Block angezeigt wird, wenn Sie mit der liMaus über das entsprechende Tag fahren. Das Beispiel aus der Twitter-Bootstrap-Seite lautet wie folgt:

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

Wenn Sie jedoch die reaktionsschnellen Funktionen von Bootstrap verwenden, möchten Sie diese Funktionalität nicht in einer reduzierten Navigationsleiste (auf kleineren Bildschirmen). Um dies zu vermeiden, schließen Sie den obigen Code in eine Medienabfrage ein:

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

Um den Pfeil (Caret) auszublenden, erfolgt dies auf unterschiedliche Weise, je nachdem, ob Sie Twitter Bootstrap Version 2 und niedriger oder Version 3 verwenden:

Bootstrap 3

Um das Caret in Version 3 zu entfernen, müssen Sie nur den HTML-Code <b class="caret"></b>aus dem .dropdown-toggleAnkerelement entfernen :

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

Bootstrap 2 & niedriger

Um das Caret in Version 2 zu entfernen, benötigen Sie etwas mehr Einblick in CSS. Ich schlage vor, die Funktionsweise des :afterPseudoelements genauer zu untersuchen. Um Ihnen den Weg zum Verständnis zu erleichtern, die Pfeile im Twitter-Bootstrap-Beispiel anzuvisieren und zu entfernen, verwenden Sie den folgenden CSS-Selektor und Code:

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

Es wird zu Ihren Gunsten funktionieren, wenn Sie genauer untersuchen, wie diese funktionieren, und nicht nur die Antworten verwenden, die ich Ihnen gegeben habe.

Vielen Dank an @CocaAkat für den Hinweis, dass wir den untergeordneten Kombinator ">" vermisst haben, um zu verhindern, dass Untermenüs auf dem übergeordneten Hover angezeigt werden

Zusätzlich zu der Antwort von "My Head Hurts" (was großartig war):

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

Es gibt zwei verbleibende Probleme:

1. Durch Klicken auf den Dropdown-Link wird das Dropdown-Menü geöffnet. Und es bleibt geöffnet, es sei denn, der Benutzer klickt auf eine andere Stelle oder schwebt wieder darüber, wodurch eine unangenehme Benutzeroberfläche entsteht.
2. Zwischen dem Dropdown-Link und dem Dropdown-Menü befindet sich ein Abstand von 1 Pixel. Dadurch wird das Dropdown-Menü ausgeblendet, wenn Sie langsam zwischen Dropdown- und Dropdown-Menü wechseln.

Die Lösung für (1) besteht darin, die Elemente "class" und "data-toggle" aus dem Navigationslink zu entfernen

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

Auf diese Weise können Sie auch einen Link zu Ihrer übergeordneten Seite erstellen - was mit der Standardimplementierung nicht möglich war. Sie können einfach das "#" durch eine beliebige Seite ersetzen, die Sie dem Benutzer senden möchten.

Die Lösung für (2) besteht darin, den oberen Rand der Menüauswahl .dropdown-menu zu entfernen

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

Ich habe ein bisschen jQuery verwendet:

// 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();
});

Hier gibt es viele wirklich gute Lösungen. Aber ich dachte, ich würde meine hier als weitere Alternative einsetzen. Es ist nur ein einfaches jQuery-Snippet, das es wie Bootstrap macht, wenn es Hover für Dropdowns unterstützt, anstatt nur zu klicken. Ich habe dies nur mit Version 3 getestet, daher weiß ich nicht, ob es mit Version 2 funktionieren würde. Speichern Sie es als Snippet in Ihrem Editor und haben Sie es auf Knopfdruck.

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

Grundsätzlich heißt es nur, wenn Sie mit der Maus über die Dropdown-Klasse fahren, wird die offene Klasse hinzugefügt. Dann funktioniert es einfach. Wenn Sie aufhören, entweder mit der Dropdown-Klasse über dem übergeordneten Li oder mit dem untergeordneten ul / li zu schweben, wird die offene Klasse entfernt. Offensichtlich ist dies nur eine von vielen Lösungen, und Sie können sie hinzufügen, damit sie nur für bestimmte Instanzen von .dropdown funktioniert. Oder fügen Sie einen Übergang zu einem Elternteil oder einem Kind hinzu.

Passen Sie einfach Ihren CSS-Stil in drei Codezeilen an

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

Wenn Sie ein Element mit einer dropdownKlasse wie dieser haben (zum Beispiel):

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

Mithilfe dieses Ausschnitts aus jQuery-Code können Sie das Dropdown-Menü beim Hover-Over automatisch herunterklappen lassen, anstatt auf den Titel klicken zu müssen:

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

Hier ist eine Demo

Diese Antwort stützte sich auf die Antwort von @Michael . Ich habe einige Änderungen vorgenommen und einige Ergänzungen hinzugefügt, damit das Dropdown-Menü ordnungsgemäß funktioniert

[Update] Das Plugin ist auf GitHub und ich arbeite an einigen Verbesserungen (wie die Verwendung nur mit Datenattributen (kein JS erforderlich). Ich habe den Code unten belassen, aber er ist nicht derselbe wie der auf GitHub.

Ich mochte die reine CSS-Version, aber es ist schön, eine Verzögerung zu haben, bevor sie geschlossen wird, da dies normalerweise eine bessere Benutzererfahrung ist (dh nicht für einen Mausbeleg bestraft wird, der 1 Pixel außerhalb des Dropdowns liegt usw.), und wie in den Kommentaren erwähnt , gibt es diesen 1px Rand, mit dem Sie sich befassen müssen, oder manchmal wird das Navigationssystem unerwartet geschlossen, wenn Sie von der ursprünglichen Schaltfläche zum Dropdown-Menü wechseln usw.

Ich habe ein schnelles kleines Plugin erstellt, das ich auf einigen Websites verwendet habe, und es hat gut funktioniert. Jedes Navigationselement wird unabhängig behandelt, sodass es über eigene Verzögerungszeitgeber usw. verfügt.

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

Der delayParameter ist ziemlich selbsterklärend und instantlyCloseOthersschließt sofort alle anderen Dropdowns, die geöffnet sind, wenn Sie mit der Maus über einen neuen fahren.

Kein reines CSS, aber hoffentlich hilft es jemand anderem zu dieser späten Stunde (dh dies ist ein alter Thread).

Wenn Sie möchten, können Sie die verschiedenen Prozesse sehen, die ich durchlaufen habe (in einer Diskussion im #concrete5IRC), damit es über die verschiedenen Schritte in dieser Übersicht funktioniert: https://gist.github.com/3876924

Der Plugin-Pattern-Ansatz ist viel sauberer, um einzelne Timer usw. zu unterstützen.

Weitere Informationen finden Sie im Blogbeitrag .

Das hat bei mir funktioniert:

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

Dies ist in Bootstrap 3 integriert. Fügen Sie dies einfach Ihrem CSS hinzu:

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

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

Sie können die Standardmethode $().dropdown('toggle')verwenden, um das Dropdown-Menü beim Hover umzuschalten:

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

Ich möchte nur hinzufügen, dass Sie schreiben sollten, wenn Sie mehrere Dropdowns haben (wie ich):

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

Und es wird richtig funktionieren.

Meiner Meinung nach ist der beste Weg so:

;(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);

Beispiel-Markup:

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

Der beste Weg, dies zu tun, besteht darin, das Klickereignis von Bootstrap einfach mit einem Hover auszulösen. Auf diese Weise sollte es weiterhin berührungsgerätefreundlich bleiben.

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

Ich habe es wie folgt geschafft:

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

Ich hoffe das hilft jemandem ...

Außerdem wurde Rand oben hinzugefügt: 0, um den Bootstrap-CSS-Rand für das .dropdown-Menü zurückzusetzen, damit die Menüliste nicht verschwindet, wenn der Benutzer langsam vom Dropdown-Menü zur Menüliste schwebt.

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

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

Dies ist wahrscheinlich eine dumme Idee, aber um nur den nach unten zeigenden Pfeil zu entfernen, können Sie den löschen

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

Dies tut jedoch nichts für den nach oben weisenden ...

Ich habe ein geeignetes Plugin für die Dropdown-Hover-Funktion von Bootstrap 3 veröffentlicht, in dem Sie sogar definieren können, was beim Klicken auf das dropdown-toggleElement passiert (der Klick kann deaktiviert werden):

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

Warum habe ich es geschafft, wenn es bereits viele Lösungen gibt?

Ich hatte Probleme mit allen zuvor vorhandenen Lösungen. Die einfachen CSS verwenden die .openKlasse nicht auf der.dropdown , sodass keine Rückmeldung zum Dropdown-Umschaltelement erfolgt, wenn das Dropdown-Menü sichtbar ist.

Die js stören das Klicken auf .dropdown-toggle , sodass das Dropdown beim Hover angezeigt wird. Wenn Sie auf ein geöffnetes Dropdown , wird es ausgeblendet. Wenn Sie die Maus das Dropdown-Menü erneut angezeigt. Einige der js-Lösungen beeinträchtigen die iOS-Kompatibilität, andere Plugins funktionieren nicht in modernen Desktop-Browsern, die Touch-Ereignisse unterstützen.

Aus diesem Grund habe ich das Bootstrap Dropdown Hover- Plugin erstellt , das all diese Probleme verhindert, indem nur die Standard-Bootstrap-Javascript-API ohne Hack verwendet wird . Sogar die Aria-Attribute funktionieren mit diesem Plugin einwandfrei.

Verwenden Sie diesen Code, um das Untermenü im Mauszeiger zu öffnen (nur 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','');
    }
});

Und wenn Sie möchten, dass das Menü der ersten Ebene auch auf Mobilgeräten anklickbar ist, fügen Sie Folgendes hinzu:

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

Das Untermenü (Dropdown-Menü) wird mit dem Mauszeiger auf dem Desktop und mit Click / Touch auf dem Handy und Tablet geöffnet. Sobald das Untermenü geöffnet war, können Sie den Link mit einem zweiten Klick öffnen. Dank der if ($(window).width() > 767)wird das Untermenü auf dem Handy die volle Bildschirmbreite einnehmen.

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

Dadurch werden die oberen ausgeblendet

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

Dies sollte die Dropdowns und ihre Carets verbergen, wenn sie kleiner als eine Tablette sind.

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

Die jQuery-Lösung ist gut, muss jedoch entweder bei Klickereignissen (für Mobilgeräte oder Tablets) behandelt werden, da der Schwebeflug nicht ordnungsgemäß funktioniert.

Die Antwort von Andres Ilich scheint gut zu funktionieren, sollte aber in eine Medienabfrage eingeschlossen werden:

@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;
    }
}

Die sehr einfache Lösung für Version 2, nur CSS. Behält die gleiche freundliche Funktionalität für Handy und Tablet.

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

Überschreiben Sie bootstrap.js mit diesem Skript.

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

}); 

Hier ist meine Technik, die eine leichte Verzögerung hinzufügt, bevor das Menü geschlossen wird, nachdem Sie aufgehört haben, über dem Menü oder der Umschalttaste zu schweben. Das <button>, auf das Sie normalerweise klicken würden, um das Navigationsmenü anzuzeigen, ist #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);
});

Um die Antwort von Sudharshan zu verbessern, füge ich dies in eine Medienabfrage ein, um das Schweben auf XS-Anzeigebreiten zu verhindern ...

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

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

Auch das Caret im Markup ist nicht erforderlich, nur die Dropdown- Klasse für das Li .

Dies funktioniert für WordPress Bootstrap:

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

Sie haben also diesen Code:

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

Normalerweise funktioniert es bei einem Klickereignis, und Sie möchten, dass es bei einem Hover-Ereignis funktioniert. Dies ist sehr einfach. Verwenden Sie einfach diesen JavaScript / jQuery-Code:

$(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();
        })
    })
})

Das funktioniert sehr gut und hier ist die Erklärung: Wir haben eine Schaltfläche und ein Menü. Wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü angezeigt, und wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü nach 100 ms ausgeblendet. Wenn Sie sich fragen, warum ich das verwende, brauchen Sie Zeit, um den Cursor von der Schaltfläche über das Menü zu ziehen. Wenn Sie im Menü sind, wird die Zeit zurückgesetzt und Sie können so oft dort bleiben, wie Sie möchten. Wenn Sie das Menü verlassen, wird das Menü sofort ohne Zeitüberschreitung ausgeblendet.

Ich habe diesen Code in vielen Projekten verwendet. Wenn Sie Probleme bei der Verwendung haben, können Sie mir gerne Fragen stellen.