Как сделать раскрывающееся меню Twitter Bootstrap, а не щелчком

Я хочу, чтобы мое меню Bootstrap автоматически выпадало при наведении курсора, вместо того, чтобы щелкнуть по названию меню. Я также хотел бы потерять маленькие стрелки рядом с названиями меню.

Ответы

Ответ 1

Я создал раскрывающееся меню с чистым потоком на основе последней (v2.0.2) структуры Bootstrap, которая поддерживает несколько подменю, и подумала, что я разместил ее для будущих пользователей:

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>

Ответ 2

Чтобы меню автоматически зависало, это можно сделать с помощью базового CSS. Вам нужно настроить селектор на параметр скрытого меню, а затем настроить его на отображение в виде блока, когда соответствующий тег li зависнет. Взяв пример с страницы начальной загрузки twitter, селектор будет выглядеть следующим образом:

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

Однако, если вы используете функции, отвечающие за Bootstrap, вам не нужна эта функция на сложенном navbar (на меньших экранах). Чтобы этого избежать, оберните код выше в медиа-запросе:

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

Чтобы скрыть стрелку (карету), это делается по-разному в зависимости от того, используете ли вы бета-версию Twitter Bootstrap версии 2 и ниже или версию 3:

Bootstrap 3

Чтобы удалить каретку в версии 3, вам просто нужно удалить HTML <b class="caret"></b> из элемента привязки .dropdown-toggle:

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

Бутстрап 2 и ниже

Чтобы удалить каретку в версии 2, вам нужно немного больше понять CSS, и я предлагаю посмотреть, как псевдо-элемент :after работает более подробно. Чтобы вы начали свой путь к пониманию, чтобы настроить и удалить стрелки в примере загрузки twitter, вы должны использовать следующий селектор и код CSS:

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

Это будет работать в вашу пользу, если вы посмотрите дальше, как они работают, а не просто используют ответы, которые я вам дал.

Благодаря @CocaAkat, указав, что нам не хватает дочернего комбинатора " > ", чтобы предотвратить отображение подменю в родительском зависании

Ответ 3

В дополнение к ответу от "My Head Hurts" (что было здорово):

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

Есть две длительные проблемы:

  • При нажатии на раскрывающееся меню открывается раскрывающееся меню. И он останется открытым, если пользователь не щелкнет где-то еще или не вернется к нему, создав неудобный интерфейс.
  • Между раскрывающимся списком и выпадающим меню имеется поле 1px. Это приводит к тому, что раскрывающееся меню становится скрытым, если вы медленно перемещаетесь между выпадающим меню и выпадающим меню.

Решение (1) устраняет элементы "класса" и "данные" из навигационной ссылки

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

Это также дает вам возможность создать ссылку на родительскую страницу, что было невозможно при реализации по умолчанию. Вы можете просто заменить "#" на любую страницу, которую вы хотите отправить пользователю.

Решение (2) устраняет верхний край в селекторе .dropdown-menu

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

Ответ 4

Я использовал немного 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();
});

Ответ 5

Здесь очень много хороших решений. Но я думал, что буду идти дальше и ставить здесь свою кандидатуру. Это просто простой фрагмент jQuery, который делает это способом загрузки, если он поддерживает зависание для выпадающих меню, а не просто щелчок. Я тестировал это только с версией 3, поэтому не знаю, будет ли она работать с версией 2. Сохраните ее как фрагмент в редакторе и возьмите его под удар ключа.

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

В принципе, просто говоря, когда вы наводите курсор на раскрывающийся класс, он добавит к нему открытый класс. Тогда это просто работает. Когда вы перестаете зависать либо с родительским листом с выпадающим классом, либо с дочерним ul/li, он удаляет открытый класс. Очевидно, что это только одно из многих решений, и вы можете добавить его, чтобы он работал только с конкретными экземплярами .dropdown. Или добавьте переход к родительскому или дочернему.

Ответ 6

Просто настройте свой стиль CSS в трех строках кода

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

Ответ 7

Если у вас есть элемент с классом dropdown, например так:

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

Затем можно использовать раскрывающееся меню для автоматического раскрытия при наведении курсора, а не щелкать его заголовок, используя этот фрагмент кода jQuery:

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

Вот демонстрация

Этот ответ основывался на ответе @Michael. Я внес некоторые изменения и добавил некоторые дополнения для правильной работы раскрывающегося меню.

Ответ 8

[Обновить] Плагин находится на GitHub, и я работаю над некоторыми улучшениями (например, только для использования с атрибутами данных (нет необходимости в JS). Я оставляю код ниже, но это не то же самое, что в GitHub.

Мне понравилась чисто версия CSS, но приятно задерживать ее до того, как она закрывается, так как обычно это лучший пользовательский интерфейс (т.е. не наказанный за промашку мыши, которая выходит за пределы 1 пиксель за пределами выпадающего списка и т.д.), и, как указано в комментариях есть 1px поля, с которым вам приходится иметь дело, или иногда nav неожиданно закрывается, когда вы переходите к выпадающему меню из исходной кнопки и т.д.

Я создал небольшой небольшой плагин, который я использовал на нескольких сайтах, и он работал красиво. Каждый элемент навигации независимо обрабатывается, поэтому у них есть собственные таймеры задержки и т.д.

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

Параметр delay довольно понятен, и instantlyCloseOthers мгновенно закрывает все остальные выпадающие списки, которые открыты, когда вы наведете новый.

Не чистый CSS, но, надеюсь, поможет кому-то еще в этот поздний час (т.е. это старый поток).

Если вы хотите, вы можете увидеть различные процессы, которые я прошел (в обсуждении IRC https://gist.github.com/3876924

Подход шаблона плагина намного более чист для поддержки отдельных таймеров и т.д.

Подробнее см. сообщение в блоге.

Ответ 9

Это сработало для меня:

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

Ответ 10

Это встроено в Bootstrap 3. Просто добавьте это в свой CSS:

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

Ответ 11

Еще лучше с 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');
});

Ответ 12

Вы можете использовать метод $().dropdown('toggle') по умолчанию для переключения выпадающего меню при наведении:

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

Ответ 13

Просто хочу добавить, что если у вас несколько выпадающих списков (как и я), вы должны написать:

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

И он будет работать правильно.

Ответ 14

Лучший способ сделать это - просто вызвать событие щелчка Bootstrap с зависанием. Таким образом, он должен по-прежнему оставаться сенсорным устройством.

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

Ответ 15

На мой взгляд, лучший способ таков:

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

Пример разметки:

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

Ответ 16

Я справился с этим следующим образом: 

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

Я надеюсь, что это поможет кому-то...

Ответ 17

Это, вероятно, глупая идея, но чтобы просто удалить стрелку, указывающую вниз, вы можете удалить

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

Это ничего не делает для указателя вверх, хотя...

Ответ 18

Также добавлен margin-top: от 0 до reset край загрузочного css для .dropdown-меню, поэтому список меню не исчезает, когда пользователь медленно наводит курсор из выпадающего меню в список меню.

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

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

Ответ 19

Я опубликовал подходящий плагин для функции всплывающего наведения Bootstrap 3, в котором вы даже можете определить, что происходит при нажатии на элемент dropdown-toggle (щелчок можно отключить):

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

Почему я сделал это, когда уже есть много решений?

У меня были проблемы со всеми ранее существующими решениями. Простые CSS не используют класс .open в .dropdown, поэтому при раскрытии раскрывающегося элемента не будет никакой обратной связи.

Js мешают нажатию .dropdown-toggle, поэтому раскрывающийся список отображается при наведении курсора, а затем скрывает его при нажатии на раскрывающемся раскрывающемся меню, а при перемещении мыши запускается раскрывающийся список. Некоторые из решений js нарушают совместимость с iOS, некоторые плагины не работают в современных браузерах для настольных компьютеров, которые поддерживают сенсорные события.

Именно поэтому я создал плагин Bootstrap Dropdown Hover plugin, который предотвращает все эти проблемы, используя только стандартный API-интерфейс Bootstrap javascript без какого-либо взлома. Даже атрибуты Aria отлично работают с этим плагином.

Ответ 20

Используйте этот код, чтобы открыть подменю на мыши (только на рабочем столе):

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

И если вы хотите, чтобы меню первого уровня можно было щелкнуть, даже на мобильном телефоне добавьте это:

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

Подменю (выпадающее меню) будет открыто с помощью мыши на рабочем столе, а также щелчком мыши на мобильном телефоне и планшете. После того, как подменю было открыто, второй щелчок позволит вам открыть ссылку. Благодаря if ($(window).width() > 767) подменю будет отображать полную ширину экрана на мобильном устройстве.

Ответ 21

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

Ответ 22

Это должно скрыть выпадающие списки и их каретки, если они меньше, чем планшеты.

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

Ответ 23

Это скроет верхние

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

Ответ 24

Решение jQuery является хорошим, но ему нужно либо заниматься событиями кликов (для мобильных устройств или планшетов), так как зависание не будет работать должным образом... Может быть, вы можете сделать некоторые изменения размера окна?

Ответ Андреса Ильича, похоже, хорошо работает, но он должен быть завернут в медиа-запрос:

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

Ответ 25

Это работает для WordPress Bootstrap:

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

Ответ 26

Перезаписать bootstrap.js с помощью этого script.

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

});

Ответ 27

Здесь моя техника, которая добавляет небольшую задержку перед закрытием меню после того, как вы перестанете наводить курсор на меню или кнопку переключения. <button>, который вы обычно нажимаете для отображения навигационного меню, #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);
});

Ответ 28

Итак, у вас есть этот код:

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

Обычно он работает с событием клика, и вы хотите, чтобы он работал над событием зависания. Это очень просто, просто используйте этот код JavaScript/jQuery:

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

Это работает очень хорошо, и вот объяснение: у нас есть кнопка и меню. Когда мы наводим кнопку, мы показываем меню, и когда мы нажимаем кнопку, мы скрываем меню после 100 мкс. Если вам интересно, почему я использую это, это потому, что вам нужно время, чтобы перетащить курсор из кнопки в меню. Когда вы находитесь в меню, время reset, и вы можете оставаться там столько раз, сколько хотите. Когда вы выйдете из меню, мы немедленно скроем меню без какого-либо тайм-аута.

Я использовал этот код во многих проектах, если у вас возникли проблемы с его использованием, не стесняйтесь задавать мне вопросы.

Ответ 29

Для каретки... Я не видел никого, указывающего простой CSS, который полностью блокирует каретку.

Здесь вы идете:

.caret {
    display: none !important;
}

Ответ 30

Чтобы повысить ответ Sudharshan, я переношу это в медиа-запрос, чтобы предотвратить зависание при ширине экрана XS...

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

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

Кроме того, каретка в разметке не требуется, просто выпадающий класс для li.