How to implement a Navbar Dropdown Hover in Bootstrap v4?












25















I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>


Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).










share|improve this question




















  • 1





    I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

    – JacobLett
    Nov 21 '17 at 22:00






  • 2





    Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

    – Eonasdan
    Mar 27 '18 at 13:08
















25















I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>


Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).










share|improve this question




















  • 1





    I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

    – JacobLett
    Nov 21 '17 at 22:00






  • 2





    Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

    – Eonasdan
    Mar 27 '18 at 13:08














25












25








25


13






I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>


Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).










share|improve this question
















I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>


Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).







html css twitter-bootstrap






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 19 '18 at 19:04









Diogo Gomes

1486




1486










asked Feb 12 '17 at 2:41









ExproveExprove

3461412




3461412








  • 1





    I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

    – JacobLett
    Nov 21 '17 at 22:00






  • 2





    Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

    – Eonasdan
    Mar 27 '18 at 13:08














  • 1





    I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

    – JacobLett
    Nov 21 '17 at 22:00






  • 2





    Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

    – Eonasdan
    Mar 27 '18 at 13:08








1




1





I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

– JacobLett
Nov 21 '17 at 22:00





I ran into a similar issue and came up with this solution stackoverflow.com/questions/47357143/…

– JacobLett
Nov 21 '17 at 22:00




2




2





Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

– Eonasdan
Mar 27 '18 at 13:08





Hover menu's are a bad idea and a bad UI/UX specially if you're planning for mobile

– Eonasdan
Mar 27 '18 at 13:08












12 Answers
12






active

oldest

votes


















79














Simple, CSS only solution:



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


When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).





To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:



Complete jQuery solution (touch untouched):



Pre v4.1.2 solution (deprecated):



$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});





$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});

/* this is not needed, just prevents page reload when a dd link is clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href>Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href>Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href>Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href>Action</a>
<a class="dropdown-item" href>Another action</a>
<a class="dropdown-item" href>Something else here</a>
</div>
</li>
</ul>
</div>
</nav>







v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.

Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:



function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);





function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);

/* not needed, prevents page reload for SO example on menu link clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>







Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).






share|improve this answer


























  • Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

    – Exprove
    Feb 12 '17 at 12:12











  • @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

    – Andrei Gheorghiu
    Feb 12 '17 at 19:07













  • Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

    – Exprove
    Feb 12 '17 at 19:17








  • 1





    Use a split button. They are made exactly for that.

    – Andrei Gheorghiu
    Feb 12 '17 at 19:27













  • Oh thanks, didn't know about that type of button :)

    – Exprove
    Feb 12 '17 at 19:30



















30














Just Add this simple css code in your style-sheet and you are ready to go.



.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}





share|improve this answer





















  • 1





    is pointer-events: none; does not added in bootstrap 4?

    – Mohammad Ayoub Khan
    Jul 20 '18 at 23:09











  • This is handy and works great! Thanks.

    – mdikici
    Jul 26 '18 at 8:39






  • 4





    this is best answer

    – OzzyCzech
    Jul 26 '18 at 9:57











  • Thankyou OzzyCzech

    – Mohammad Ayoub Khan
    Jul 27 '18 at 9:08



















6














Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.






$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
var dropdown = $(e.target).closest('.dropdown');
var menu = $('.dropdown-menu', dropdown);
dropdown.addClass('show');
menu.addClass('show');
setTimeout(function () {
dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
}, 300);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>








share|improve this answer
























  • You are the real mvp :) Thank you a lot!

    – Mitca Vicentiu
    Apr 18 '18 at 21:56



















6














Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.



So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:



$('body').on('mouseover mouseout', '.dropdown', function(e) {
$(e.target).dropdown('toggle');
});





share|improve this answer





















  • 1





    I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

    – Andrei Gheorghiu
    Jul 9 '18 at 14:44











  • pureCSS solution which is described above is more accurate than this.

    – Mohammad Ayoub Khan
    Jul 20 '18 at 23:13











  • @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

    – LionelW
    Jul 21 '18 at 5:54











  • @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

    – LionelW
    Jul 21 '18 at 6:08











  • You are right...

    – Mohammad Ayoub Khan
    Jul 21 '18 at 14:43



















3














I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.



function bootstrapHoverMenu (bp = 768) {

// close all dropdowns that are open
$('body').click( function (e) {
$('.dropdown-menu.show').removeClass('show');
});

// show dropdown for the link clicked
$('.nav-item').hover(function (e) {
$('.dropdown-menu.show').removeClass('show');
if(( $(window).width() >= bp )) {
$dd = $(this).find('.dropdown-menu');
$dd.addClass('show');
}
});

// get href for top level link if clicked and open
$('.dropdown').click(function (e) {
if( $(window).width() < bp ) {
$('.dropdown-menu').css({'display': 'none'});
}
$href = $(this).find('.nav-link').attr('href');
window.open($href, '_self');
});
}

$(document).ready( function() {
// when page ready run the fix
bootstrapHoverMenu();
});


Downside is mobile only has top level links.






share|improve this answer


























  • i think pureCSS solution is best.

    – Mohammad Ayoub Khan
    Jul 20 '18 at 23:13



















2














Bootstrap v4 Solution - jQuery based, but better than a pure css solution




This ensures that you can still follow top level link clicks and is
compatible with mobile.




This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.



jQuery



/** Dropdown on hover */
$(".nav-link.dropdown-toggle").hover( function () {
// Open up the dropdown
$(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
$(this).parent().addClass('show'); // add the class show to the li parent
$(this).next().addClass('show'); // add the class show to the dropdown div sibling
}, function () {
// on mouseout check to see if hovering over the dropdown or the link still
var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
if(isDropdownHovered || isThisHovered) {
// still hovering over the link or the dropdown
} else {
// no longer hovering over either - lets remove the 'show' classes
$(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
$(this).parent().removeClass('show');
$(this).next().removeClass('show');
}
});
// Check the dropdown on hover
$(".dropdown-menu").hover( function () {
}, function() {
var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
if(isDropdownHovered || isThisHovered) {
// do nothing - hovering over the dropdown of the top level link
} else {
// get rid of the classes showing it
$(this).parent().removeClass('show');
$(this).removeClass('show');
}
});


CSS



@media(min-width:  768px) {
.dropdown-menu {
margin-top: 0; // fixes closing on slow mouse transition
}
}





share|improve this answer































    1














    I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.



      <a 
    onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
    class="nav-link dropdown-toggle"
    href="http://example.com"
    id="navbarDropdownMenuLink"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Dropdown link
    </a>





    share|improve this answer



















    • 1





      you're going to stuff jquery script inside a plain javascript event handler inline?

      – Eonasdan
      Mar 27 '18 at 13:07



















    1














    Bootstrap 4 CSS-only



    None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.



    Here's the simple CSS only solution:



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


    Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.



    Demo https://www.codeply.com/go/awyU7VTIJf





    Complete Code:



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

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    ..
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
    Dropdown
    </a>
    <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
    </div>
    </li>
    </ul>
    </div>
    </nav>





    share|improve this answer































      0














      <div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">






      share|improve this answer





















      • 2





        Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

        – GrumpyCrouton
        Nov 7 '17 at 16:18











      • This is irrelevant to the question.

        – Radmation
        Jul 19 '18 at 17:03



















      0














      This solution switches on and off



      <script>
      $(document).ready(function() {
      // close all dropdowns that are open
      $('body').click(function(e) {
      $('.nav-item.show').removeClass('show');
      //$('.nav-item.clicked').removeClass('clicked');
      $('.dropdown-menu.show').removeClass('show');
      });

      $('.nav-item').click( function(e) {
      $(this).addClass('clicked')
      });

      // show dropdown for the link clicked
      $('.nav-item').hover(function(e) {
      if ($('.nav-item.show').length < 1) {
      $('.nav-item.clicked').removeClass('clicked');
      }
      if ($('.nav-item.clicked').length < 1) {
      $('.nav-item.show').removeClass('show');
      $('.dropdown-menu.show').removeClass('show');
      $dd = $(this).find('.dropdown-menu');
      $dd.parent().addClass('show');
      $dd.addClass('show');
      }
      });
      });</script>


      To disable the hover for lg sized collapse menus add



      if(( $(window).width() >= 992 )) {





      share|improve this answer

































        0














        CSS solutions not working properly on touch device



        I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


        So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

        Very useful! It states that a touch device always first checks the existence of a hover class on an element.


        But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).



        To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)



        He has some very handy ways of detecting touch or hover devices.



        So, combined the two authors with a bit jQuery of my own:



        $(window).one('mouseover', function(){
        window.USER_CAN_HOVER = true;
        if(USER_CAN_HOVER){
        jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
        var $parent = jQuery(this);
        var $dropdown = $parent.children('ul');

        $dropdown.show(200,function() {
        $parent.mouseleave(function() {
        var $this = jQuery(this);
        $this.children('ul').fadeOut(200);
        });
        });
        });
        };


        });
        Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.



        Be sure to remove any CSS regarding menu hover classes.



        Took me three days :) so I hope it helps some of you.






        share|improve this answer

































          0














          I use bootstrap 4.0.0
          since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:



          .dropdown:hover>.dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translate3d(0px, 0px, 0px);
          }





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42183672%2fhow-to-implement-a-navbar-dropdown-hover-in-bootstrap-v4%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            12 Answers
            12






            active

            oldest

            votes








            12 Answers
            12






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            79














            Simple, CSS only solution:



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


            When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).





            To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:



            Complete jQuery solution (touch untouched):



            Pre v4.1.2 solution (deprecated):



            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });





            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>







            v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.

            Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:



            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>







            Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).






            share|improve this answer


























            • Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

              – Exprove
              Feb 12 '17 at 12:12











            • @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:07













            • Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

              – Exprove
              Feb 12 '17 at 19:17








            • 1





              Use a split button. They are made exactly for that.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:27













            • Oh thanks, didn't know about that type of button :)

              – Exprove
              Feb 12 '17 at 19:30
















            79














            Simple, CSS only solution:



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


            When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).





            To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:



            Complete jQuery solution (touch untouched):



            Pre v4.1.2 solution (deprecated):



            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });





            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>







            v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.

            Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:



            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>







            Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).






            share|improve this answer


























            • Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

              – Exprove
              Feb 12 '17 at 12:12











            • @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:07













            • Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

              – Exprove
              Feb 12 '17 at 19:17








            • 1





              Use a split button. They are made exactly for that.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:27













            • Oh thanks, didn't know about that type of button :)

              – Exprove
              Feb 12 '17 at 19:30














            79












            79








            79







            Simple, CSS only solution:



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


            When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).





            To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:



            Complete jQuery solution (touch untouched):



            Pre v4.1.2 solution (deprecated):



            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });





            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>







            v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.

            Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:



            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>







            Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).






            share|improve this answer















            Simple, CSS only solution:



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


            When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).





            To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:



            Complete jQuery solution (touch untouched):



            Pre v4.1.2 solution (deprecated):



            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });





            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>







            v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.

            Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:



            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>







            Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).






            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>





            $('body').on('mouseenter mouseleave','.dropdown',function(e){
            var _d=$(e.target).closest('.dropdown');
            if (e.type === 'mouseenter')_d.addClass('show');
            setTimeout(function(){
            _d.toggleClass('show', _d.is(':hover'));
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
            },300);
            });

            /* this is not needed, just prevents page reload when a dd link is clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href>Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href>Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href>Action</a>
            <a class="dropdown-item" href>Another action</a>
            <a class="dropdown-item" href>Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>





            function toggleDropdown (e) {
            const _d = $(e.target).closest('.dropdown'),
            _m = $('.dropdown-menu', _d);
            setTimeout(function(){
            const shouldOpen = e.type !== 'click' && _d.is(':hover');
            _m.toggleClass('show', shouldOpen);
            _d.toggleClass('show', shouldOpen);
            $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
            }, e.type === 'mouseleave' ? 300 : 0);
            }

            $('body')
            .on('mouseenter mouseleave','.dropdown',toggleDropdown)
            .on('click', '.dropdown-menu a', toggleDropdown);

            /* not needed, prevents page reload for SO example on menu link clicked */
            $('.dropdown a').on('click tap', e => e.preventDefault())

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            </div>
            </nav>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Feb 7 at 18:07

























            answered Feb 12 '17 at 3:10









            Andrei GheorghiuAndrei Gheorghiu

            36.2k75076




            36.2k75076













            • Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

              – Exprove
              Feb 12 '17 at 12:12











            • @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:07













            • Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

              – Exprove
              Feb 12 '17 at 19:17








            • 1





              Use a split button. They are made exactly for that.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:27













            • Oh thanks, didn't know about that type of button :)

              – Exprove
              Feb 12 '17 at 19:30



















            • Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

              – Exprove
              Feb 12 '17 at 12:12











            • @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:07













            • Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

              – Exprove
              Feb 12 '17 at 19:17








            • 1





              Use a split button. They are made exactly for that.

              – Andrei Gheorghiu
              Feb 12 '17 at 19:27













            • Oh thanks, didn't know about that type of button :)

              – Exprove
              Feb 12 '17 at 19:30

















            Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

            – Exprove
            Feb 12 '17 at 12:12





            Hi thanks for your asnwer, I accomplished that aswell, but if u click the dropmenu "stays". I wouldn't like to use something like "preventdefault", do you know some css trick (remove or add) to get the dropdown not staying on click?

            – Exprove
            Feb 12 '17 at 12:12













            @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

            – Andrei Gheorghiu
            Feb 12 '17 at 19:07







            @Exprove There's is no clean CSS way of doing that. Because Bootstrap are using JavaSript. Bootstrap dropdowns do not work without js. Anyway, I took the time to look into how they do it and I came up with a script that doesn't touch touch behavior and provides what you asked for on desktops. Test it out, let me know if you find any trouble with it, I didn't, so far. Willing to improve it, if needed. Might come in handy for many if it's done right.

            – Andrei Gheorghiu
            Feb 12 '17 at 19:07















            Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

            – Exprove
            Feb 12 '17 at 19:17







            Everything works fine, but I really need to get the Dropdown link to work, if I press on the "Dropdown link" it should go to the example.com, I just can't accomplish that, I already had a close solution (like yours with jquery). Maybe if I override the click event with jquery might work, but it seems a sloppy solution.

            – Exprove
            Feb 12 '17 at 19:17






            1




            1





            Use a split button. They are made exactly for that.

            – Andrei Gheorghiu
            Feb 12 '17 at 19:27







            Use a split button. They are made exactly for that.

            – Andrei Gheorghiu
            Feb 12 '17 at 19:27















            Oh thanks, didn't know about that type of button :)

            – Exprove
            Feb 12 '17 at 19:30





            Oh thanks, didn't know about that type of button :)

            – Exprove
            Feb 12 '17 at 19:30













            30














            Just Add this simple css code in your style-sheet and you are ready to go.



            .dropdown:hover > .dropdown-menu {
            display: block;
            }
            .dropdown > .dropdown-toggle:active {
            /*Without this, clicking will make it sticky*/
            pointer-events: none;
            }





            share|improve this answer





















            • 1





              is pointer-events: none; does not added in bootstrap 4?

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:09











            • This is handy and works great! Thanks.

              – mdikici
              Jul 26 '18 at 8:39






            • 4





              this is best answer

              – OzzyCzech
              Jul 26 '18 at 9:57











            • Thankyou OzzyCzech

              – Mohammad Ayoub Khan
              Jul 27 '18 at 9:08
















            30














            Just Add this simple css code in your style-sheet and you are ready to go.



            .dropdown:hover > .dropdown-menu {
            display: block;
            }
            .dropdown > .dropdown-toggle:active {
            /*Without this, clicking will make it sticky*/
            pointer-events: none;
            }





            share|improve this answer





















            • 1





              is pointer-events: none; does not added in bootstrap 4?

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:09











            • This is handy and works great! Thanks.

              – mdikici
              Jul 26 '18 at 8:39






            • 4





              this is best answer

              – OzzyCzech
              Jul 26 '18 at 9:57











            • Thankyou OzzyCzech

              – Mohammad Ayoub Khan
              Jul 27 '18 at 9:08














            30












            30








            30







            Just Add this simple css code in your style-sheet and you are ready to go.



            .dropdown:hover > .dropdown-menu {
            display: block;
            }
            .dropdown > .dropdown-toggle:active {
            /*Without this, clicking will make it sticky*/
            pointer-events: none;
            }





            share|improve this answer















            Just Add this simple css code in your style-sheet and you are ready to go.



            .dropdown:hover > .dropdown-menu {
            display: block;
            }
            .dropdown > .dropdown-toggle:active {
            /*Without this, clicking will make it sticky*/
            pointer-events: none;
            }






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Jan 12 '18 at 10:29









            dferenc

            4,791122333




            4,791122333










            answered Jan 12 '18 at 10:25









            Mohammad Ayoub KhanMohammad Ayoub Khan

            52148




            52148








            • 1





              is pointer-events: none; does not added in bootstrap 4?

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:09











            • This is handy and works great! Thanks.

              – mdikici
              Jul 26 '18 at 8:39






            • 4





              this is best answer

              – OzzyCzech
              Jul 26 '18 at 9:57











            • Thankyou OzzyCzech

              – Mohammad Ayoub Khan
              Jul 27 '18 at 9:08














            • 1





              is pointer-events: none; does not added in bootstrap 4?

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:09











            • This is handy and works great! Thanks.

              – mdikici
              Jul 26 '18 at 8:39






            • 4





              this is best answer

              – OzzyCzech
              Jul 26 '18 at 9:57











            • Thankyou OzzyCzech

              – Mohammad Ayoub Khan
              Jul 27 '18 at 9:08








            1




            1





            is pointer-events: none; does not added in bootstrap 4?

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:09





            is pointer-events: none; does not added in bootstrap 4?

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:09













            This is handy and works great! Thanks.

            – mdikici
            Jul 26 '18 at 8:39





            This is handy and works great! Thanks.

            – mdikici
            Jul 26 '18 at 8:39




            4




            4





            this is best answer

            – OzzyCzech
            Jul 26 '18 at 9:57





            this is best answer

            – OzzyCzech
            Jul 26 '18 at 9:57













            Thankyou OzzyCzech

            – Mohammad Ayoub Khan
            Jul 27 '18 at 9:08





            Thankyou OzzyCzech

            – Mohammad Ayoub Khan
            Jul 27 '18 at 9:08











            6














            Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.






            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>








            share|improve this answer
























            • You are the real mvp :) Thank you a lot!

              – Mitca Vicentiu
              Apr 18 '18 at 21:56
















            6














            Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.






            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>








            share|improve this answer
























            • You are the real mvp :) Thank you a lot!

              – Mitca Vicentiu
              Apr 18 '18 at 21:56














            6












            6








            6







            Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.






            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>








            share|improve this answer













            Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.






            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>








            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>





            $('body').on('mouseenter mouseleave', '.dropdown', function (e) {
            var dropdown = $(e.target).closest('.dropdown');
            var menu = $('.dropdown-menu', dropdown);
            dropdown.addClass('show');
            menu.addClass('show');
            setTimeout(function () {
            dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
            }, 300);
            });

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
            </li>
            </ul>
            </div>
            </nav>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Feb 22 '18 at 18:44









            Mike BogochowMike Bogochow

            11017




            11017













            • You are the real mvp :) Thank you a lot!

              – Mitca Vicentiu
              Apr 18 '18 at 21:56



















            • You are the real mvp :) Thank you a lot!

              – Mitca Vicentiu
              Apr 18 '18 at 21:56

















            You are the real mvp :) Thank you a lot!

            – Mitca Vicentiu
            Apr 18 '18 at 21:56





            You are the real mvp :) Thank you a lot!

            – Mitca Vicentiu
            Apr 18 '18 at 21:56











            6














            Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.



            So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:



            $('body').on('mouseover mouseout', '.dropdown', function(e) {
            $(e.target).dropdown('toggle');
            });





            share|improve this answer





















            • 1





              I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

              – Andrei Gheorghiu
              Jul 9 '18 at 14:44











            • pureCSS solution which is described above is more accurate than this.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13











            • @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

              – LionelW
              Jul 21 '18 at 5:54











            • @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

              – LionelW
              Jul 21 '18 at 6:08











            • You are right...

              – Mohammad Ayoub Khan
              Jul 21 '18 at 14:43
















            6














            Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.



            So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:



            $('body').on('mouseover mouseout', '.dropdown', function(e) {
            $(e.target).dropdown('toggle');
            });





            share|improve this answer





















            • 1





              I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

              – Andrei Gheorghiu
              Jul 9 '18 at 14:44











            • pureCSS solution which is described above is more accurate than this.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13











            • @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

              – LionelW
              Jul 21 '18 at 5:54











            • @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

              – LionelW
              Jul 21 '18 at 6:08











            • You are right...

              – Mohammad Ayoub Khan
              Jul 21 '18 at 14:43














            6












            6








            6







            Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.



            So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:



            $('body').on('mouseover mouseout', '.dropdown', function(e) {
            $(e.target).dropdown('toggle');
            });





            share|improve this answer















            Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.



            So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:



            $('body').on('mouseover mouseout', '.dropdown', function(e) {
            $(e.target).dropdown('toggle');
            });






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Oct 11 '18 at 4:23

























            answered Mar 21 '18 at 7:55









            LionelWLionelW

            30227




            30227








            • 1





              I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

              – Andrei Gheorghiu
              Jul 9 '18 at 14:44











            • pureCSS solution which is described above is more accurate than this.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13











            • @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

              – LionelW
              Jul 21 '18 at 5:54











            • @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

              – LionelW
              Jul 21 '18 at 6:08











            • You are right...

              – Mohammad Ayoub Khan
              Jul 21 '18 at 14:43














            • 1





              I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

              – Andrei Gheorghiu
              Jul 9 '18 at 14:44











            • pureCSS solution which is described above is more accurate than this.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13











            • @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

              – LionelW
              Jul 21 '18 at 5:54











            • @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

              – LionelW
              Jul 21 '18 at 6:08











            • You are right...

              – Mohammad Ayoub Khan
              Jul 21 '18 at 14:43








            1




            1





            I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

            – Andrei Gheorghiu
            Jul 9 '18 at 14:44





            I tend to stay away from toggles on mouse events. If it only misfires once, the dropdown will stay open when not hovered and hide when hovered. Typically one can misfire an enter/leave pointer sequence by scribbling with the cursor over the element. But for proper testing, hover the element, change tab or window and go back to your window with the mouse in another position. Now hover the element.

            – Andrei Gheorghiu
            Jul 9 '18 at 14:44













            pureCSS solution which is described above is more accurate than this.

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:13





            pureCSS solution which is described above is more accurate than this.

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:13













            @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

            – LionelW
            Jul 21 '18 at 5:54





            @AndreiGheorghiu Oops my choice of mouse events wasn't the best; mouseover mouseout seems to fix that issue. Thanks, I'll edit my post.

            – LionelW
            Jul 21 '18 at 5:54













            @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

            – LionelW
            Jul 21 '18 at 6:08





            @MohammadAyoubKhan A pure CSS solution misses various other behaviors though, which include firing events and toggling certain classes and attributes.

            – LionelW
            Jul 21 '18 at 6:08













            You are right...

            – Mohammad Ayoub Khan
            Jul 21 '18 at 14:43





            You are right...

            – Mohammad Ayoub Khan
            Jul 21 '18 at 14:43











            3














            I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.



            function bootstrapHoverMenu (bp = 768) {

            // close all dropdowns that are open
            $('body').click( function (e) {
            $('.dropdown-menu.show').removeClass('show');
            });

            // show dropdown for the link clicked
            $('.nav-item').hover(function (e) {
            $('.dropdown-menu.show').removeClass('show');
            if(( $(window).width() >= bp )) {
            $dd = $(this).find('.dropdown-menu');
            $dd.addClass('show');
            }
            });

            // get href for top level link if clicked and open
            $('.dropdown').click(function (e) {
            if( $(window).width() < bp ) {
            $('.dropdown-menu').css({'display': 'none'});
            }
            $href = $(this).find('.nav-link').attr('href');
            window.open($href, '_self');
            });
            }

            $(document).ready( function() {
            // when page ready run the fix
            bootstrapHoverMenu();
            });


            Downside is mobile only has top level links.






            share|improve this answer


























            • i think pureCSS solution is best.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13
















            3














            I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.



            function bootstrapHoverMenu (bp = 768) {

            // close all dropdowns that are open
            $('body').click( function (e) {
            $('.dropdown-menu.show').removeClass('show');
            });

            // show dropdown for the link clicked
            $('.nav-item').hover(function (e) {
            $('.dropdown-menu.show').removeClass('show');
            if(( $(window).width() >= bp )) {
            $dd = $(this).find('.dropdown-menu');
            $dd.addClass('show');
            }
            });

            // get href for top level link if clicked and open
            $('.dropdown').click(function (e) {
            if( $(window).width() < bp ) {
            $('.dropdown-menu').css({'display': 'none'});
            }
            $href = $(this).find('.nav-link').attr('href');
            window.open($href, '_self');
            });
            }

            $(document).ready( function() {
            // when page ready run the fix
            bootstrapHoverMenu();
            });


            Downside is mobile only has top level links.






            share|improve this answer


























            • i think pureCSS solution is best.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13














            3












            3








            3







            I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.



            function bootstrapHoverMenu (bp = 768) {

            // close all dropdowns that are open
            $('body').click( function (e) {
            $('.dropdown-menu.show').removeClass('show');
            });

            // show dropdown for the link clicked
            $('.nav-item').hover(function (e) {
            $('.dropdown-menu.show').removeClass('show');
            if(( $(window).width() >= bp )) {
            $dd = $(this).find('.dropdown-menu');
            $dd.addClass('show');
            }
            });

            // get href for top level link if clicked and open
            $('.dropdown').click(function (e) {
            if( $(window).width() < bp ) {
            $('.dropdown-menu').css({'display': 'none'});
            }
            $href = $(this).find('.nav-link').attr('href');
            window.open($href, '_self');
            });
            }

            $(document).ready( function() {
            // when page ready run the fix
            bootstrapHoverMenu();
            });


            Downside is mobile only has top level links.






            share|improve this answer















            I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.



            function bootstrapHoverMenu (bp = 768) {

            // close all dropdowns that are open
            $('body').click( function (e) {
            $('.dropdown-menu.show').removeClass('show');
            });

            // show dropdown for the link clicked
            $('.nav-item').hover(function (e) {
            $('.dropdown-menu.show').removeClass('show');
            if(( $(window).width() >= bp )) {
            $dd = $(this).find('.dropdown-menu');
            $dd.addClass('show');
            }
            });

            // get href for top level link if clicked and open
            $('.dropdown').click(function (e) {
            if( $(window).width() < bp ) {
            $('.dropdown-menu').css({'display': 'none'});
            }
            $href = $(this).find('.nav-link').attr('href');
            window.open($href, '_self');
            });
            }

            $(document).ready( function() {
            // when page ready run the fix
            bootstrapHoverMenu();
            });


            Downside is mobile only has top level links.







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Mar 16 '18 at 12:51

























            answered Mar 16 '18 at 10:02









            DerekOBrienDerekOBrien

            413




            413













            • i think pureCSS solution is best.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13



















            • i think pureCSS solution is best.

              – Mohammad Ayoub Khan
              Jul 20 '18 at 23:13

















            i think pureCSS solution is best.

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:13





            i think pureCSS solution is best.

            – Mohammad Ayoub Khan
            Jul 20 '18 at 23:13











            2














            Bootstrap v4 Solution - jQuery based, but better than a pure css solution




            This ensures that you can still follow top level link clicks and is
            compatible with mobile.




            This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.



            jQuery



            /** Dropdown on hover */
            $(".nav-link.dropdown-toggle").hover( function () {
            // Open up the dropdown
            $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
            $(this).parent().addClass('show'); // add the class show to the li parent
            $(this).next().addClass('show'); // add the class show to the dropdown div sibling
            }, function () {
            // on mouseout check to see if hovering over the dropdown or the link still
            var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
            var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
            if(isDropdownHovered || isThisHovered) {
            // still hovering over the link or the dropdown
            } else {
            // no longer hovering over either - lets remove the 'show' classes
            $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
            $(this).parent().removeClass('show');
            $(this).next().removeClass('show');
            }
            });
            // Check the dropdown on hover
            $(".dropdown-menu").hover( function () {
            }, function() {
            var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
            var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
            if(isDropdownHovered || isThisHovered) {
            // do nothing - hovering over the dropdown of the top level link
            } else {
            // get rid of the classes showing it
            $(this).parent().removeClass('show');
            $(this).removeClass('show');
            }
            });


            CSS



            @media(min-width:  768px) {
            .dropdown-menu {
            margin-top: 0; // fixes closing on slow mouse transition
            }
            }





            share|improve this answer




























              2














              Bootstrap v4 Solution - jQuery based, but better than a pure css solution




              This ensures that you can still follow top level link clicks and is
              compatible with mobile.




              This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.



              jQuery



              /** Dropdown on hover */
              $(".nav-link.dropdown-toggle").hover( function () {
              // Open up the dropdown
              $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
              $(this).parent().addClass('show'); // add the class show to the li parent
              $(this).next().addClass('show'); // add the class show to the dropdown div sibling
              }, function () {
              // on mouseout check to see if hovering over the dropdown or the link still
              var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
              var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
              if(isDropdownHovered || isThisHovered) {
              // still hovering over the link or the dropdown
              } else {
              // no longer hovering over either - lets remove the 'show' classes
              $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
              $(this).parent().removeClass('show');
              $(this).next().removeClass('show');
              }
              });
              // Check the dropdown on hover
              $(".dropdown-menu").hover( function () {
              }, function() {
              var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
              var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
              if(isDropdownHovered || isThisHovered) {
              // do nothing - hovering over the dropdown of the top level link
              } else {
              // get rid of the classes showing it
              $(this).parent().removeClass('show');
              $(this).removeClass('show');
              }
              });


              CSS



              @media(min-width:  768px) {
              .dropdown-menu {
              margin-top: 0; // fixes closing on slow mouse transition
              }
              }





              share|improve this answer


























                2












                2








                2







                Bootstrap v4 Solution - jQuery based, but better than a pure css solution




                This ensures that you can still follow top level link clicks and is
                compatible with mobile.




                This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.



                jQuery



                /** Dropdown on hover */
                $(".nav-link.dropdown-toggle").hover( function () {
                // Open up the dropdown
                $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
                $(this).parent().addClass('show'); // add the class show to the li parent
                $(this).next().addClass('show'); // add the class show to the dropdown div sibling
                }, function () {
                // on mouseout check to see if hovering over the dropdown or the link still
                var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
                var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
                if(isDropdownHovered || isThisHovered) {
                // still hovering over the link or the dropdown
                } else {
                // no longer hovering over either - lets remove the 'show' classes
                $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
                $(this).parent().removeClass('show');
                $(this).next().removeClass('show');
                }
                });
                // Check the dropdown on hover
                $(".dropdown-menu").hover( function () {
                }, function() {
                var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
                var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
                if(isDropdownHovered || isThisHovered) {
                // do nothing - hovering over the dropdown of the top level link
                } else {
                // get rid of the classes showing it
                $(this).parent().removeClass('show');
                $(this).removeClass('show');
                }
                });


                CSS



                @media(min-width:  768px) {
                .dropdown-menu {
                margin-top: 0; // fixes closing on slow mouse transition
                }
                }





                share|improve this answer













                Bootstrap v4 Solution - jQuery based, but better than a pure css solution




                This ensures that you can still follow top level link clicks and is
                compatible with mobile.




                This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.



                jQuery



                /** Dropdown on hover */
                $(".nav-link.dropdown-toggle").hover( function () {
                // Open up the dropdown
                $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
                $(this).parent().addClass('show'); // add the class show to the li parent
                $(this).next().addClass('show'); // add the class show to the dropdown div sibling
                }, function () {
                // on mouseout check to see if hovering over the dropdown or the link still
                var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
                var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
                if(isDropdownHovered || isThisHovered) {
                // still hovering over the link or the dropdown
                } else {
                // no longer hovering over either - lets remove the 'show' classes
                $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
                $(this).parent().removeClass('show');
                $(this).next().removeClass('show');
                }
                });
                // Check the dropdown on hover
                $(".dropdown-menu").hover( function () {
                }, function() {
                var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
                var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
                if(isDropdownHovered || isThisHovered) {
                // do nothing - hovering over the dropdown of the top level link
                } else {
                // get rid of the classes showing it
                $(this).parent().removeClass('show');
                $(this).removeClass('show');
                }
                });


                CSS



                @media(min-width:  768px) {
                .dropdown-menu {
                margin-top: 0; // fixes closing on slow mouse transition
                }
                }






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jul 19 '18 at 17:02









                RadmationRadmation

                980720




                980720























                    1














                    I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.



                      <a 
                    onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
                    class="nav-link dropdown-toggle"
                    href="http://example.com"
                    id="navbarDropdownMenuLink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                    Dropdown link
                    </a>





                    share|improve this answer



















                    • 1





                      you're going to stuff jquery script inside a plain javascript event handler inline?

                      – Eonasdan
                      Mar 27 '18 at 13:07
















                    1














                    I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.



                      <a 
                    onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
                    class="nav-link dropdown-toggle"
                    href="http://example.com"
                    id="navbarDropdownMenuLink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                    Dropdown link
                    </a>





                    share|improve this answer



















                    • 1





                      you're going to stuff jquery script inside a plain javascript event handler inline?

                      – Eonasdan
                      Mar 27 '18 at 13:07














                    1












                    1








                    1







                    I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.



                      <a 
                    onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
                    class="nav-link dropdown-toggle"
                    href="http://example.com"
                    id="navbarDropdownMenuLink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                    Dropdown link
                    </a>





                    share|improve this answer













                    I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.



                      <a 
                    onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
                    class="nav-link dropdown-toggle"
                    href="http://example.com"
                    id="navbarDropdownMenuLink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                    Dropdown link
                    </a>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Mar 27 '18 at 13:00









                    FishermanFisherman

                    3,51311631




                    3,51311631








                    • 1





                      you're going to stuff jquery script inside a plain javascript event handler inline?

                      – Eonasdan
                      Mar 27 '18 at 13:07














                    • 1





                      you're going to stuff jquery script inside a plain javascript event handler inline?

                      – Eonasdan
                      Mar 27 '18 at 13:07








                    1




                    1





                    you're going to stuff jquery script inside a plain javascript event handler inline?

                    – Eonasdan
                    Mar 27 '18 at 13:07





                    you're going to stuff jquery script inside a plain javascript event handler inline?

                    – Eonasdan
                    Mar 27 '18 at 13:07











                    1














                    Bootstrap 4 CSS-only



                    None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.



                    Here's the simple CSS only solution:



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


                    Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.



                    Demo https://www.codeply.com/go/awyU7VTIJf





                    Complete Code:



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

                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    ..
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
                    Dropdown
                    </a>
                    <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                    </li>
                    </ul>
                    </div>
                    </nav>





                    share|improve this answer




























                      1














                      Bootstrap 4 CSS-only



                      None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.



                      Here's the simple CSS only solution:



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


                      Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.



                      Demo https://www.codeply.com/go/awyU7VTIJf





                      Complete Code:



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

                      <nav class="navbar navbar-expand-lg navbar-light bg-light">
                      ..
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto">
                      <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
                      Dropdown
                      </a>
                      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                      </li>
                      </ul>
                      </div>
                      </nav>





                      share|improve this answer


























                        1












                        1








                        1







                        Bootstrap 4 CSS-only



                        None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.



                        Here's the simple CSS only solution:



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


                        Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.



                        Demo https://www.codeply.com/go/awyU7VTIJf





                        Complete Code:



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

                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        ..
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
                        Dropdown
                        </a>
                        <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                        </li>
                        </ul>
                        </div>
                        </nav>





                        share|improve this answer













                        Bootstrap 4 CSS-only



                        None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.



                        Here's the simple CSS only solution:



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


                        Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.



                        Demo https://www.codeply.com/go/awyU7VTIJf





                        Complete Code:



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

                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        ..
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
                        Dropdown
                        </a>
                        <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                        </li>
                        </ul>
                        </div>
                        </nav>






                        share|improve this answer












                        share|improve this answer



                        share|improve this answer










                        answered Aug 29 '18 at 13:25









                        ZimZim

                        196k51412395




                        196k51412395























                            0














                            <div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">






                            share|improve this answer





















                            • 2





                              Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                              – GrumpyCrouton
                              Nov 7 '17 at 16:18











                            • This is irrelevant to the question.

                              – Radmation
                              Jul 19 '18 at 17:03
















                            0














                            <div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">






                            share|improve this answer





















                            • 2





                              Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                              – GrumpyCrouton
                              Nov 7 '17 at 16:18











                            • This is irrelevant to the question.

                              – Radmation
                              Jul 19 '18 at 17:03














                            0












                            0








                            0







                            <div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">






                            share|improve this answer















                            <div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">







                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 10 '17 at 17:20

























                            answered Nov 7 '17 at 15:39









                            Oscar ChamorroOscar Chamorro

                            111




                            111








                            • 2





                              Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                              – GrumpyCrouton
                              Nov 7 '17 at 16:18











                            • This is irrelevant to the question.

                              – Radmation
                              Jul 19 '18 at 17:03














                            • 2





                              Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                              – GrumpyCrouton
                              Nov 7 '17 at 16:18











                            • This is irrelevant to the question.

                              – Radmation
                              Jul 19 '18 at 17:03








                            2




                            2





                            Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                            – GrumpyCrouton
                            Nov 7 '17 at 16:18





                            Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

                            – GrumpyCrouton
                            Nov 7 '17 at 16:18













                            This is irrelevant to the question.

                            – Radmation
                            Jul 19 '18 at 17:03





                            This is irrelevant to the question.

                            – Radmation
                            Jul 19 '18 at 17:03











                            0














                            This solution switches on and off



                            <script>
                            $(document).ready(function() {
                            // close all dropdowns that are open
                            $('body').click(function(e) {
                            $('.nav-item.show').removeClass('show');
                            //$('.nav-item.clicked').removeClass('clicked');
                            $('.dropdown-menu.show').removeClass('show');
                            });

                            $('.nav-item').click( function(e) {
                            $(this).addClass('clicked')
                            });

                            // show dropdown for the link clicked
                            $('.nav-item').hover(function(e) {
                            if ($('.nav-item.show').length < 1) {
                            $('.nav-item.clicked').removeClass('clicked');
                            }
                            if ($('.nav-item.clicked').length < 1) {
                            $('.nav-item.show').removeClass('show');
                            $('.dropdown-menu.show').removeClass('show');
                            $dd = $(this).find('.dropdown-menu');
                            $dd.parent().addClass('show');
                            $dd.addClass('show');
                            }
                            });
                            });</script>


                            To disable the hover for lg sized collapse menus add



                            if(( $(window).width() >= 992 )) {





                            share|improve this answer






























                              0














                              This solution switches on and off



                              <script>
                              $(document).ready(function() {
                              // close all dropdowns that are open
                              $('body').click(function(e) {
                              $('.nav-item.show').removeClass('show');
                              //$('.nav-item.clicked').removeClass('clicked');
                              $('.dropdown-menu.show').removeClass('show');
                              });

                              $('.nav-item').click( function(e) {
                              $(this).addClass('clicked')
                              });

                              // show dropdown for the link clicked
                              $('.nav-item').hover(function(e) {
                              if ($('.nav-item.show').length < 1) {
                              $('.nav-item.clicked').removeClass('clicked');
                              }
                              if ($('.nav-item.clicked').length < 1) {
                              $('.nav-item.show').removeClass('show');
                              $('.dropdown-menu.show').removeClass('show');
                              $dd = $(this).find('.dropdown-menu');
                              $dd.parent().addClass('show');
                              $dd.addClass('show');
                              }
                              });
                              });</script>


                              To disable the hover for lg sized collapse menus add



                              if(( $(window).width() >= 992 )) {





                              share|improve this answer




























                                0












                                0








                                0







                                This solution switches on and off



                                <script>
                                $(document).ready(function() {
                                // close all dropdowns that are open
                                $('body').click(function(e) {
                                $('.nav-item.show').removeClass('show');
                                //$('.nav-item.clicked').removeClass('clicked');
                                $('.dropdown-menu.show').removeClass('show');
                                });

                                $('.nav-item').click( function(e) {
                                $(this).addClass('clicked')
                                });

                                // show dropdown for the link clicked
                                $('.nav-item').hover(function(e) {
                                if ($('.nav-item.show').length < 1) {
                                $('.nav-item.clicked').removeClass('clicked');
                                }
                                if ($('.nav-item.clicked').length < 1) {
                                $('.nav-item.show').removeClass('show');
                                $('.dropdown-menu.show').removeClass('show');
                                $dd = $(this).find('.dropdown-menu');
                                $dd.parent().addClass('show');
                                $dd.addClass('show');
                                }
                                });
                                });</script>


                                To disable the hover for lg sized collapse menus add



                                if(( $(window).width() >= 992 )) {





                                share|improve this answer















                                This solution switches on and off



                                <script>
                                $(document).ready(function() {
                                // close all dropdowns that are open
                                $('body').click(function(e) {
                                $('.nav-item.show').removeClass('show');
                                //$('.nav-item.clicked').removeClass('clicked');
                                $('.dropdown-menu.show').removeClass('show');
                                });

                                $('.nav-item').click( function(e) {
                                $(this).addClass('clicked')
                                });

                                // show dropdown for the link clicked
                                $('.nav-item').hover(function(e) {
                                if ($('.nav-item.show').length < 1) {
                                $('.nav-item.clicked').removeClass('clicked');
                                }
                                if ($('.nav-item.clicked').length < 1) {
                                $('.nav-item.show').removeClass('show');
                                $('.dropdown-menu.show').removeClass('show');
                                $dd = $(this).find('.dropdown-menu');
                                $dd.parent().addClass('show');
                                $dd.addClass('show');
                                }
                                });
                                });</script>


                                To disable the hover for lg sized collapse menus add



                                if(( $(window).width() >= 992 )) {






                                share|improve this answer














                                share|improve this answer



                                share|improve this answer








                                edited Jul 15 '18 at 2:40

























                                answered Jul 14 '18 at 4:46









                                Tom HansenTom Hansen

                                11




                                11























                                    0














                                    CSS solutions not working properly on touch device



                                    I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


                                    So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

                                    Very useful! It states that a touch device always first checks the existence of a hover class on an element.


                                    But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).



                                    To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)



                                    He has some very handy ways of detecting touch or hover devices.



                                    So, combined the two authors with a bit jQuery of my own:



                                    $(window).one('mouseover', function(){
                                    window.USER_CAN_HOVER = true;
                                    if(USER_CAN_HOVER){
                                    jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
                                    var $parent = jQuery(this);
                                    var $dropdown = $parent.children('ul');

                                    $dropdown.show(200,function() {
                                    $parent.mouseleave(function() {
                                    var $this = jQuery(this);
                                    $this.children('ul').fadeOut(200);
                                    });
                                    });
                                    });
                                    };


                                    });
                                    Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.



                                    Be sure to remove any CSS regarding menu hover classes.



                                    Took me three days :) so I hope it helps some of you.






                                    share|improve this answer






























                                      0














                                      CSS solutions not working properly on touch device



                                      I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


                                      So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

                                      Very useful! It states that a touch device always first checks the existence of a hover class on an element.


                                      But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).



                                      To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)



                                      He has some very handy ways of detecting touch or hover devices.



                                      So, combined the two authors with a bit jQuery of my own:



                                      $(window).one('mouseover', function(){
                                      window.USER_CAN_HOVER = true;
                                      if(USER_CAN_HOVER){
                                      jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
                                      var $parent = jQuery(this);
                                      var $dropdown = $parent.children('ul');

                                      $dropdown.show(200,function() {
                                      $parent.mouseleave(function() {
                                      var $this = jQuery(this);
                                      $this.children('ul').fadeOut(200);
                                      });
                                      });
                                      });
                                      };


                                      });
                                      Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.



                                      Be sure to remove any CSS regarding menu hover classes.



                                      Took me three days :) so I hope it helps some of you.






                                      share|improve this answer




























                                        0












                                        0








                                        0







                                        CSS solutions not working properly on touch device



                                        I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


                                        So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

                                        Very useful! It states that a touch device always first checks the existence of a hover class on an element.


                                        But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).



                                        To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)



                                        He has some very handy ways of detecting touch or hover devices.



                                        So, combined the two authors with a bit jQuery of my own:



                                        $(window).one('mouseover', function(){
                                        window.USER_CAN_HOVER = true;
                                        if(USER_CAN_HOVER){
                                        jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
                                        var $parent = jQuery(this);
                                        var $dropdown = $parent.children('ul');

                                        $dropdown.show(200,function() {
                                        $parent.mouseleave(function() {
                                        var $this = jQuery(this);
                                        $this.children('ul').fadeOut(200);
                                        });
                                        });
                                        });
                                        };


                                        });
                                        Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.



                                        Be sure to remove any CSS regarding menu hover classes.



                                        Took me three days :) so I hope it helps some of you.






                                        share|improve this answer















                                        CSS solutions not working properly on touch device



                                        I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


                                        So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

                                        Very useful! It states that a touch device always first checks the existence of a hover class on an element.


                                        But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).



                                        To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)



                                        He has some very handy ways of detecting touch or hover devices.



                                        So, combined the two authors with a bit jQuery of my own:



                                        $(window).one('mouseover', function(){
                                        window.USER_CAN_HOVER = true;
                                        if(USER_CAN_HOVER){
                                        jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
                                        var $parent = jQuery(this);
                                        var $dropdown = $parent.children('ul');

                                        $dropdown.show(200,function() {
                                        $parent.mouseleave(function() {
                                        var $this = jQuery(this);
                                        $this.children('ul').fadeOut(200);
                                        });
                                        });
                                        });
                                        };


                                        });
                                        Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.



                                        Be sure to remove any CSS regarding menu hover classes.



                                        Took me three days :) so I hope it helps some of you.







                                        share|improve this answer














                                        share|improve this answer



                                        share|improve this answer








                                        edited Jan 3 at 7:40

























                                        answered Dec 23 '18 at 12:43









                                        MikeMike

                                        12




                                        12























                                            0














                                            I use bootstrap 4.0.0
                                            since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:



                                            .dropdown:hover>.dropdown-menu {
                                            opacity: 1;
                                            visibility: visible;
                                            transform: translate3d(0px, 0px, 0px);
                                            }





                                            share|improve this answer




























                                              0














                                              I use bootstrap 4.0.0
                                              since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:



                                              .dropdown:hover>.dropdown-menu {
                                              opacity: 1;
                                              visibility: visible;
                                              transform: translate3d(0px, 0px, 0px);
                                              }





                                              share|improve this answer


























                                                0












                                                0








                                                0







                                                I use bootstrap 4.0.0
                                                since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:



                                                .dropdown:hover>.dropdown-menu {
                                                opacity: 1;
                                                visibility: visible;
                                                transform: translate3d(0px, 0px, 0px);
                                                }





                                                share|improve this answer













                                                I use bootstrap 4.0.0
                                                since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:



                                                .dropdown:hover>.dropdown-menu {
                                                opacity: 1;
                                                visibility: visible;
                                                transform: translate3d(0px, 0px, 0px);
                                                }






                                                share|improve this answer












                                                share|improve this answer



                                                share|improve this answer










                                                answered Mar 18 at 7:59









                                                Rifki FauziRifki Fauzi

                                                6617




                                                6617






























                                                    draft saved

                                                    draft discarded




















































                                                    Thanks for contributing an answer to Stack Overflow!


                                                    • Please be sure to answer the question. Provide details and share your research!

                                                    But avoid



                                                    • Asking for help, clarification, or responding to other answers.

                                                    • Making statements based on opinion; back them up with references or personal experience.


                                                    To learn more, see our tips on writing great answers.




                                                    draft saved


                                                    draft discarded














                                                    StackExchange.ready(
                                                    function () {
                                                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42183672%2fhow-to-implement-a-navbar-dropdown-hover-in-bootstrap-v4%23new-answer', 'question_page');
                                                    }
                                                    );

                                                    Post as a guest















                                                    Required, but never shown





















































                                                    Required, but never shown














                                                    Required, but never shown












                                                    Required, but never shown







                                                    Required, but never shown

































                                                    Required, but never shown














                                                    Required, but never shown












                                                    Required, but never shown







                                                    Required, but never shown







                                                    Popular posts from this blog

                                                    Monofisismo

                                                    Angular Downloading a file using contenturl with Basic Authentication

                                                    Olmecas