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 :
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>How to open dropdown menuon hover in Bootstrap</title><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><styletype="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><divclass="container"><h1style="text-align:center;color:green;">GeeksforGeeks</h1><h3>How to open dropdown menu on hover in Bootstrap</h3><divclass="bs-example"><!--Tabs with dropdown menu--><ulclass="nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Login</a></li><li><ahref="#">SignUp</a></li><liclass="dropdown"><ahref="#"data-toggle="dropdown"class="dropdown-toggle">Menu<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Algorithm</a></li><li><ahref="#">Gate</a></li><li><ahref="#">Languages</a></li><li><ahref="#">Interview</a></li><li><ahref="#">Subject</a></li></ul></li></ul><hr></div></div><scripttype="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:
<!DOCTYPE html><htmllang="en"><head><title>How to open dropdownmenu on hover in Bootstrap</title><linkhref=rel="stylesheet"/><scriptsrc=</script><scriptsrc=</script><styletype="text/css">.bs-example {margin: auto;width: 25%;}.dropdown:hover .dropdown-menu {display: block;}</style></head><body><center><divclass="container"><h1style="text-align:center;color:green;">GeeksforGeeks</h1><h3>How to open dropdown menu on hover in Bootstrap</h3><divclass="bs-example"><ulid="nav"class="nav nav-pills clearfix right"role="tablist"><li><ahref="#">Home</a></li><li><ahref="#">Login</a></li><li><ahref="#">SignUp</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Menu</a><ulid="products-menu"class="dropdown-menu clearfix"role="menu"><li><ahref="">Algo</a></li><li><ahref="">Gate</a></li><li><ahref="">Subject</a></li><li><ahref="">Practise</a></li></ul></li></ul></div></div></center></body></html>Output:
Before moving mouse to the dropdown:
After moving mouse to the dropdown: