How to Show Bootstrap Dropdown Menu on Hover

In this tutorial, learn how to show Bootstrap dropdown menu on hover using jQuery or CSS. Open the dropdown menu when hovering over the menu items with jQuery or CSS. A display on hover is the quickest way of opening menu items.

Take your mouse to the menu items and see them open requires less effort. Automatically add open and close menu class on hover required jQuery. You may also like to read how to prevent closing the bootstrap modal when clicking outside using jQuery.

Show Bootstrap Dropdown Menu on Hover Using jQuery

To perform this task, you can jQuery hover function. The jQuery adds or remove the CSS class ‘open’ to open or close the menu on hover. This is the required step to add style to HTML element and apply CSS.

Output

The above example contains the dropdown menu button. Take your mouse to the menu item to open the dropdown on hover. You can also check the ‘open’ class if it add or remove CSS class using jQuery.

If you want to open dropdown menu on hover using only CSS, then read further to perform this task.

Show Bootstrap Dropdown Menu on Hover Using CSS Only

Another way of showing dropdown menu on mouse hover is using CSS. You just need to add a few lines of CSS given below to perform this task. Use the CSS property display:block on hover of the dropdown menu. This requires less code and require no jQuery coding to achieve this task.

Output

Hover over the above menu item to open the dropdown menu items.

Hope, you like this tutorial on how to show bootstrap dropdown menu on hover using jQuery or CSS. If you have any query regarding this tutorial, please comment below.

Also tell me, which method are you using to open dropdown menu on hover.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.