Bootstrap Dropdown with Hover

Question

OK, so what I need is fairly straightforward.

I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.

The thing is it works "onClick", while I would prefer if it worked "onHover".

Is there any built-in way to do this?

See my newly published proper plugin which prevents the issues of the below CSS and js solutions: https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover — István Ujj-Mészáros, Jun 27 '15 at 03:15

score 451 · Accepted Answer · edited Jun 27 '23 at 22:43

451

The easiest solution would be in CSS. Add something like:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

JSFiddle

edited Jun 27 '23 at 22:43

Kevin M. Mansour

2,915
6
18
35

answered Apr 25 '13 at 12:14

brbcoding

13,378
2
37
51

3

So much better than long 'full-built' solutions. Just add this and the default 'click' dropdown works on hover without extra changes. – iamface Apr 13 '14 at 19:59
66

This will conflict with the built in collapsable mobile menu, so you should wrap it in a break point @media (min-width:480px) – Billy Shih May 29 '14 at 19:56
8

Also noteworthy: if you have a dropdown menu with parent-child relationships, for instance in a wordpress theme, you need to remove the ```data-toggle``` attribute to make the parent item click-able...Just watch out for collateral damage on mobile screens. – Ken Prince Jun 04 '14 at 20:07
4

Is there some easy way how to disable display on click and keep hover behavior only? – Micer Nov 14 '14 at 15:37
This is nice as far as hover goes. However, how do you keep the dropdown menus stay so that you can select? – newman Apr 04 '15 at 04:00
Ah, I figured out...adding `margin-top: 0;` to the same css will make the dropdown menu stay when you move your mouse over. – newman Apr 04 '15 at 04:07
when u goes down.. submenu hide ...it should not be done – Prashant Tapase Apr 25 '15 at 12:06
1

@Micer, I have just published a plugin in which you can disable the click event. The plugin works without any CSS hack, using only the Bootstrap javascript API, so it is compatible with all devices: https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover – István Ujj-Mészáros Jun 27 '15 at 01:55
1

Nice, thanks a lot. as Billy Shih said, this is my code @media (min-width: $screen-sm-min) { .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } } – D.Shinekhuu Aug 07 '15 at 03:02
1

`@media only screen and (min-width:480px){ .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } } ` – EGurelli Oct 31 '16 at 15:05
Nice simple solution, use `.dropdown:hover .dropdown-menu, .dropup:hover .dropdown-menu` top make it work for dropup menu too :) – Web Dev Guy Jul 05 '17 at 00:22
Works, but if you tab on the menu on mobile, once dropdown is open you cannot click them off again anymore unless you click in another menu which is kind of annoying. – Thielicious Aug 06 '17 at 16:34
7

@Micer using this CSS solution works great for hover, but if you also click the item, then the dropdown remains after moving the mouse off the item. This is because the click opens a second dropdown underneath the 'hover' one. To fix this, remove the data-toggle="dropdown" attributes from the child elements, which will prevent the click opening the duplicate dropdown – Xcalibur Sep 11 '17 at 06:51
you save me, I'm check why it auto show dropdown when mouse over, check all the javascript but can't find it... suddenly get CSS also can do this! – BeiBei ZHU Aug 30 '19 at 06:31
3

If the fiddle doesn't work for you can replace the CSS @import with this line: `@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css');` – Mitch Wilkins Jan 25 '21 at 21:55

score 73 · Answer 2 · answered Mar 01 '14 at 08:12

73

The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly

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

answered Mar 01 '14 at 08:12

Mark Williams

1,119
10
7

2

fails if you have more than one dropdown level – Connie DeCinko Nov 18 '15 at 22:18
1

Not Working with parent link – JBC Mar 30 '16 at 23:38
is there a way to remove the Active class once the dropdown is closed? – brainvision May 17 '16 at 22:20
There's a pixel gap between the dropdown element and the menu that can cause the menu to hide sometime crossing over, unless you are quick – Matt Apr 27 '17 at 04:28
1

Using multiple dropdowns need some 'closest' filtering. – err Nov 20 '17 at 14:47
For me, this also triggers the focus on the menu items, which looks bad. So I added `.blur()`: `$('.dropdown-toggle', this).trigger('click').blur();` – Filipe Dec 20 '22 at 13:49

score 65 · Answer 3 · edited Jul 10 '15 at 17:01

65

You can use jQuery's hover function.

You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.

Here's my code:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

edited Jul 10 '15 at 17:01

duci9y

4,128
3
26
42

answered Oct 24 '13 at 09:21

adhi

805
6
8

12

Way better then the accepted answer imho. This keeps all the bootstrap logic and styling intact. Though I'd advice using the second call back and explicitly use removeClass and addClass to prevent some wierd behavior when you have clicked the button (where it would open when you leave the button and close when you enter it). – Bastiaan Linders May 15 '15 at 07:51
7

I also think this is the best answer. To get it to work with Bootstrap 4 menu, I had to use `show` instead of `open`, and also include the `dropdown-menu`: `$('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});` (Sorry for the formatting.) – Robin Zimmermann Nov 21 '17 at 22:53
Don't work if you have two dropdown menu items. On hover on any dropdown item will show both submenus – Juan Antonio Tubío Oct 16 '18 at 17:48

Biagio Chirico · Answer 4 · 2013-10-05T08:36:30.327

28

An easy way, using jQuery, is this:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

edited Oct 05 '13 at 08:36

answered Oct 04 '13 at 21:57

Biagio Chirico

646
5
14

I love the smooth transition, however it causes all levels of menu to expand instead of just the first level. I don't want second level menus to appear until I hover over their parent. – Connie DeCinko Nov 18 '15 at 22:28
1

To get the first level only, add `.first()` - `$(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);` ... – flydev Jun 16 '16 at 18:33

score 13 · Answer 5 · answered Nov 20 '14 at 06:57

13

For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

answered Nov 20 '14 at 06:57

user1079877

9,008
4
43
54

1

A beauty! Tx! CSS alternatives won't work on Bootstrap 3 and beyond. – Pedro Ferreira Nov 11 '15 at 22:28
1

Thanks! Ended up going with: $('.dropdown').mouseenter(function() { if(!$('.navbar-toggle').is(':visible')) { $(this).addClass('open'); } }); $('.dropdown').mouseleave(function() { if(!$('.navbar-toggle').is(':visible')) { $(this).removeClass('open'); } }); – BanAnanas Nov 27 '22 at 23:27

score 6 · Answer 6 · edited May 23 '17 at 12:26

6

In Twitter Bootstrap is not implemented but you can use the this plugin

Update 1:

Sames question here

edited May 23 '17 at 12:26

Community

1
1

answered Apr 25 '13 at 12:12

Emad Mokhtar

3,237
5
31
49

score 6 · Answer 7 · answered Sep 09 '13 at 15:28

6

Hover over the nav items to see that they activate on hover. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

answered Sep 09 '13 at 15:28

esm

61
1
1

score 6 · Answer 8 · answered Mar 12 '14 at 13:25

So you have this 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>

Normally it works on click event, and you want it work on hover event. This is very simple, just use this 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();
        })
    })
})

This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.

I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.

This code has a lot of problems on bootstrap v3. 1.) If there is more than one dropdown, all dropdowns are displayed when any is hovered over. 2.) On small screens, hovering shows the dropdown in a strange way. — KayakinKoder, Jul 17 '17 at 22:56

Sabri Aziri · Answer 9 · 2014-03-12T22:40:33.390

This will help you make your own hover class for bootstrap:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

Margins are set to avoid unwanted close and they are optional.

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Don't forget to remove the button attribute data-toggle="dropdown" if you want to remove onclick open, and this also will work when input is append with dropdown.

Amir5000 · Answer 10 · 2014-04-08T19:17:46.120

4

This is what I use to make it dropdown on hover with some jQuery

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

edited Apr 08 '14 at 19:17

answered Apr 08 '14 at 18:11

Amir5000

1,718
15
19

Nice but does not support sub menus. – Connie DeCinko Nov 18 '15 at 22:31

István Ujj-Mészáros · Answer 11 · 2015-06-27T02:14:34.143

Updated with a proper plugin

I have published a proper plugin for the dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element:

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

Why I made it, when there are many solutions already?

I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the .dropdown, so there will be no feedback on the dropdown toggle element when the dropdown is visible.

The js ones are interfering with clicking on .dropdown-toggle, so the dropdown shows up on hover, then hides it when clicking on an opened dropdown, and moving out the mouse will trigger the dropdown to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.

That's why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.

score 3 · Answer 12 · answered Apr 04 '16 at 06:07

3

Try this using hover function with fadein fadeout animations

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

answered Apr 04 '16 at 06:07

Rakesh Vadnal

975
1
10
22

This animation is not working in 3rd depth but it's working in 2nd depth. Do you have any other solution for 3rd depth? – Jilani A Feb 21 '18 at 11:24
please add JSFiddle for reference – Rakesh Vadnal Feb 21 '18 at 13:05

score 2 · Answer 13 · answered May 26 '14 at 19:23

This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

You can find a much better solution here: https://github.com/CWSpear/bootstrap-hover-dropdown. — solarbaypilot, Apr 21 '15 at 11:14

score 2 · Answer 14 · answered Oct 01 '14 at 09:40

I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it

supposed that you add class="dropdown" to li, i added a timeout

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

score 2 · Answer 15 · edited Oct 15 '15 at 15:47

Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:

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

score 2 · Answer 16 · edited Oct 28 '21 at 18:55

Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

score 2 · Answer 17 · answered Aug 07 '22 at 06:27

In Bootstrap 5.x you can add a custom class like dropdown-hover to the main dropdown element. then manage hover events by JQuery.

$( document ).ready(function() {

    // Add hover action for dropdowns
    let dropdown_hover = $(".dropdown-hover");
    dropdown_hover.on('mouseover', function(){
        let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
        menu.addClass('show');
        toggle.addClass('show').attr('aria-expanded', true);
    });
    dropdown_hover.on('mouseout', function(){
        let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
        menu.removeClass('show');
        toggle.removeClass('show').attr('aria-expanded', false);
    });

});

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container p-5">

      <div class="dropdown dropdown-hover">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="#">Action</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Another action</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Something else here</a>
          </li>
        </ul>
      </div>

    </div>
  </body>
</html>

Great answer and works in 4.7 as well . – Dave Nugent Jun 01 '23 at 18:00 — Dave Nugent, Jun 01 '23 at 18:00

score 1 · Answer 18 · answered Mar 10 '15 at 17:41

1

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

answered Mar 10 '15 at 17:41

Waqar Ahmed

11
3

score 1 · Answer 19 · answered May 23 '19 at 16:18

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div>

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen

score 1 · Answer 20 · answered Nov 15 '20 at 12:37

1

Use the mouseover() function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

answered Nov 15 '20 at 12:37

smartrahat

5,381
6
47
68

score 1 · Answer 21 · answered Jun 27 '23 at 22:25

@user1079877 and @BanAnanas 's setup worked fine on legacy bootstrap, but needed minor corrections and the addition of keeping the menu open till the page deloads from the browser:

  $('.dropdown').on('mouseenter', function () {
    if (!$('.navbar-toggle').is(':visible')) {
      $(this).addClass('open');
    }
  });
  $('.dropdown').on('mouseleave', function () {
    if ($('.navbar-toggle').is(':visible')) {
      $(this).removeClass('open');
    }
  });
  $('.navbar-toggle .navbar-item a').on('click', function (e) {
    e.stopPropagation();
  });

score 0 · Answer 22 · answered Mar 13 '17 at 10:01

The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.

Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

score 0 · Answer 23 · answered Dec 17 '21 at 13:46

You implement this functionality by using Jquery:

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

score 0 · Answer 24 · answered Jan 24 '22 at 06:56

Tested and Working Fine

<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
  <div class="container" style="width:100%;">
    <div class="navbar-header" style="height:90px;">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>

      <a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
        <img src="material/logo.png" width="160px;" alt="visoka">
      </a>
      <a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
        <img src="material/logo.png" width="200px;">
      </a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
      <ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">

        <li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
        <li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>

        <li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
        <a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
          <li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
          <li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

  <script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}

function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>

score 0 · Answer 25 · answered Jul 28 '22 at 15:16

Bootstrap 5 with jquery version

Just add hoverable class to dropdown and add below code to main javascript file

// Hoverable dropdown
$('.dropdown.hoverable').on({
    mouseenter: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    },
    mouseleave: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    }
});

Bootstrap Dropdown with Hover

25 Answers25

Updated with a proper plugin

Why I made it, when there are many solutions already?

Linked