How to open dropdown menu on hover in Bootstrap ? Last Updated : 26 Nov, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).hover(Function_in, Function_out); Approach: The .hover() method is the used to tackle the mouseenter event occurrence Store all direct children of the selected element using the .children() method. Check the elements whether it is visible or not using .is(":visible") method. The elements are shown using .toggleClass("open") method. Example : html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>How to open dropdown menu on hover in Bootstrap</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <style type="text/css"> .bs-example { margin: auto; width: 25%; } @media screen { .dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu { display: block; } .dropdown-menu { margin: auto; } .dropdown-toggle { margin: auto; } .navbar .dropdown-toggle, .nav-tabs .dropdown-toggle { margin: auto; } } </style> </head> <body> <center> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <h3> How to open dropdown menu on hover in Bootstrap </h3> <div class="bs-example"> <!--Tabs with dropdown menu--> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Login</a></li> <li><a href="#">SignUp</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Menu <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Algorithm</a></li> <li><a href="#">Gate</a></li> <li><a href="#">Languages</a></li> <li><a href="#">Interview</a></li> <li><a href="#">Subject</a></li> </ul> </li> </ul> <hr> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(".dropdown, .btn-group").hover(function() { var dropdownMenu = $(this).children(".dropdown-menu"); if (dropdownMenu.is(":visible")) { dropdownMenu.parent().toggleClass("open"); } }); }); </script> </center> </body> </html> Output: Before moving mouse to the dropdown: After moving mouse to the dropdown: Using the CSS property Section of code to be used in the program .dropdown:hover .dropdown-menu { display: block; } Example: html <!DOCTYPE html> <html lang="en"> <head> <title>How to open dropdown menu on hover in Bootstrap</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </script> <style type="text/css"> .bs-example { margin: auto; width: 25%; } .dropdown:hover .dropdown-menu { display: block; } </style> </head> <body> <center> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <h3>How to open dropdown menu on hover in Bootstrap </h3> <div class="bs-example"> <ul id="nav" class="nav nav-pills clearfix right" role="tablist"> <li><a href="#">Home</a></li> <li><a href="#">Login</a></li> <li><a href="#">SignUp</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu </a> <ul id="products-menu" class="dropdown-menu clearfix" role="menu"> <li><a href="">Algo</a></li> <li><a href="">Gate</a></li> <li><a href="">Subject</a></li> <li><a href="">Practise</a></li> </ul> </li> </ul> </div> </div> </center> </body> </html> Output: Before moving mouse to the dropdown: After moving mouse to the dropdown: Comment More infoAdvertise with us Next Article How to Add Headers inside the Dropdown Menu in Bootstrap ? S SHUBHAMSINGH10 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Misc Similar Reads How to Make Menu Dropdown on Hover using Bootstrap ? Menu Dropdown on Hover using Bootstrap involves customizing Bootstrap's dropdown component to display menus when hovering over the trigger, not clicking. This is achieved by modifying CSS classes, such as adding "dropdown" and "dropdown-menu" to respective elements, providing a more intuitive user e 4 min read How to Add Headers inside the Dropdown Menu in Bootstrap ? Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap. Table of Content U 3 min read How to Add Headers inside the Dropdown Menu in Bootstrap ? Bootstrap provides the ability to create headers within dropdown menus, which enhances the clarity and organization of your website's navigation. Headers serve as titles or categories that group related dropdown items together, making it easier for users to quickly locate what they are looking for a 2 min read How to create a dropdown menu in Bootstrap ? A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1 2 min read How to remove arrow in dropdown in Bootstrap ? Dropdowns are one of the important components that are an integral part of any web application. Bootstrap provides its own interactive version of this component. Bootstrap dropdowns are toggled by clicking, not hovering as it was an intentional design decision. To use Dropdowns in a web project, inc 2 min read How to change Dropdown Icon on Bootstrap 5? Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not hovering this is an intentional design decision. In this article, we will learn How to change the Dr 4 min read Like