Як зробити меню завантаження програми Twitter Bootstrap на курсор, а не на клацання

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

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

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>

Демо

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

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

Однак якщо ви використовуєте чутливі функції Bootstrap, вам не захочеться ця функціональність на згорнутому навігаційному екрані (на менших екранах). Щоб уникнути цього, загортайте код вище в медіа-запит:

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

Щоб приховати стрілку (карету), це робиться різними способами залежно від того, чи використовуєте ви завантажувальну систему Twitter Bootstrap версії 2 та нижчої або версії 3:

Завантаження 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псевдо елемент. Щоб розпочати шлях до розуміння, націлення та видалення стрілок у прикладі завантажувального закладу щебетати, ви використовуєте наступний селектор та код CSS:

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

Це буде працювати на вашу користь, якщо ви далі вивчите, як вони працюють, а не просто використовувати відповіді, які я вам дав.

Дякуємо @CocaAkat, що вказав, що ми пропустили дочірній комбінатор ">", щоб запобігти появі підменю на батьківській курсорі

Окрім відповіді з "Моя голова болить" (що було чудово):

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

Існує 2 тривалих питання:

1. Натиснувши на спадне посилання, відкриється спадне меню. І він залишатиметься відкритим, якщо користувач не натисне де-небудь ще або навести назад на нього, створивши незручний інтерфейс користувача.
2. Між спадною посиланням та спадною меню існує 1px межа. Це призводить до того, що випадаюче меню стає прихованим, якщо повільно переходити між спадною та спадною меню.

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

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

Це також дає можливість створити посилання на вашу батьківську сторінку - що було неможливим із реалізацією за замовчуванням. Ви можете просто замінити "#" будь-якою сторінкою, яку ви хочете надіслати користувачеві.

Рішенням (2) є видалення верхньої межі на селекторі меню .dropdown

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

Я використав трохи 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();
});

Тут дуже багато справді хороших рішень. Але я думав, що я буду йти вперед і поставити тут свою ще одну альтернативу. Це просто простий фрагмент jQuery, який робить так, як завантажився, якби він підтримував наведення курсора на спадні місця, а не просто клацання. Я тестував це лише з версією 3, тому не знаю, чи буде вона працювати з версією 2. Збережіть її як фрагмент у вашому редакторі та вкажіть клавішу.

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

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

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

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

Якщо у вас є елемент із таким 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 , я вніс деякі зміни та додав деякі доповнення, щоб нормально працювати спадне меню

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

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

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

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

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

Не чистий CSS, але, сподіваємось, допоможе хтось інший у цю пізню годину (тобто це стара тема).

Якщо ви хочете, ви можете побачити різні процеси, через які я пройшов (в дискусії на #concrete5IRC), щоб змусити його працювати через різні кроки в цій суті: https://gist.github.com/3876924

Підхід до моделі плагінів набагато чіткіший для підтримки окремих таймерів тощо.

Докладніше див. У блозі .

Це працювало для мене:

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

Це вбудований у Bootstrap 3. Просто додайте це до свого CSS:

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

Ще краще з 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');
});

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

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

Просто хочу додати, що якщо у вас є декілька спасних місць (як я), ви повинні написати:

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

І це буде працювати належним чином.

На мою думку, найкращий спосіб такий:

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

Зразок розмітки:

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

Найкращий спосіб зробити це - просто запустити подію Bootstrap клацанням мишкою. Таким чином, він все одно повинен залишатися зручним для пристроїв із сенсорним пристроєм.

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

Я впорався так:

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

Я сподіваюся, що це комусь допоможе ...

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

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

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

Це, мабуть, дурна ідея, але щоб просто зняти стрілку, спрямовану вниз, можна видалити

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

Це нічого не робить для вказівника, хоча ...

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

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

Чому я зробив це, коли вже є багато рішень?

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

Їй заважають натискати на .dropdown-toggle , тому випадаюче меню з’являється на наведення курсору, потім приховає його при натисканні на відкрите спадне меню, а переміщення миші призведе до того, що спадне меню з’явиться знову. Деякі з рішень js порушують сумісність з iOS, деякі додатки не працюють на сучасних настільних браузерах, які підтримують сенсорні події.

Ось чому я створив плагін Bootstrap Dropdown Hover, який запобігає всім цим проблемам, використовуючи лише стандартний API JavaScript Bootstrap без будь-якого злому . Навіть атрибути Aria прекрасно працюють з цим плагіном.

Використовуйте цей код, щоб відкрити підменю на миші (лише на робочому столі):

$('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)цьому підменю прийме повну ширину екрану на мобільному пристрої.

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

Це приховатиме їх

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

Це повинно приховувати падіння крапель та їхні можливості, якщо вони менше, ніж планшет.

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

Рішення 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;
    }
}

Дуже просте рішення для версії 2, лише CSS. Зберігає однакові дружні функції для мобільних пристроїв та планшетів.

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

Перезапишіть bootstrap.js за допомогою цього сценарію.

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

}); 

Ось моя техніка, яка додає невелику затримку до закриття меню після того, як ви перестанете навести курсор на меню або кнопку перемикання. Те, <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);
});

Щоб покращити відповідь Судшаршана , я зафіксував це у медіа-запиті, щоб запобігти наведенню на ширину дисплея XS ...

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

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

Також карета в розмітці не потрібна, просто випадаючий клас для li .

Це працює для WordPress Bootstrap:

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

Отже, у вас є цей код:

<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 мс. Якщо вам цікаво, чому я це використовую, це тому, що вам потрібен час, щоб перетягнути курсор з кнопки на меню. Коли ви перебуваєте в меню, час скидається, і ви можете залишитися там скільки завгодно часу. Коли ви виходите з меню, ми будемо миттєво приховувати меню без будь-якого тайм-ауту.

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