Last Updated on January 13, 2021 by Roshan Parihar
In this tutorial, learn how to show Bootstrap dropdown menu on hover using jQuery or CSS. The short answer is: use the jQuery hover() with the addClass() to display the dropdown menu on mouse hover.
You can also use the jQuery removeClass() to hide the menu on mouse out. It requires to add/remove the class of Bootstrap to show/hide the dropdown menu on hover that you will learn below with examples.
Show and Hide Bootstrap Dropdown Menu on Hover Using jQuery
To perform an action on hover, you have to use the jQuery hover() function. On hover, you have to add a Bootstrap class .open using addClass() method. To close the menu on mouse out, you can use the jQuery removeClass() method as given in the example below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(function(){ $('.mydropdownjQuery').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); }); }); </script> <div class="dropdown mydropdownjQuery"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
The above example contains the dropdown menu button that displays on mouse hover and hides on mouse out. You can take your mouse to the menu item to open the dropdown on hover. You can also check the ‘open’ class if it adds or removes a CSS class using jQuery.
If you want to open the dropdown menu on hover using only CSS and not jQuery, then read further to perform this task.
Display Menu on Mouseover Using CSS Only
Another way of showing the dropdown menu on mouse hover is by using CSS. You just need to add a few lines of CSS given below to perform this task. It selects the element on hover using :hover selector. After that, it uses the CSS property display:block on hover to display the dropdown menu on mouse hover. This requires less code and require no jQuery coding to achieve this task.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .mydropdowncss:hover .dropdown-menu { display: block; margin-top: 0; } </style> <div class="dropdown mydropdowncss"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Menu <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> |
Output
When you mouseover over the above item, the dropdown menu items start displaying. It also hides the dropdown menu on the mouse out without any need for other CSS for this. So, an easy to use a method using CSS with fewer requirements of writing CSS codes.
You May Also Like to Read
- Add Style to HTML Element Using jQuery
- Add/Remove CSS Class Using jQuery
- How to Open Dropdown on Hover Using jQuery and JS
I hope you like this tutorial on how to show the Bootstrap dropdown menu on hover using jQuery or CSS.