How to open dropdown menu on hover in Bootstrap ? - GeeksforGeeks

26 Nov, 2019
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 occurrenceStore 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><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 propertySection of code to be used in the program.dropdown:hover .dropdown-menu {
  display: block;
}Example:<!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:
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 occurrenceStore 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><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:
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><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 propertySection of code to be used in the program.dropdown:hover .dropdown-menu {
  display: block;
}Example:<!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:
.dropdown:hover .dropdown-menu {
  display: block;
}
Example:
<!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:
ManasChhabra2
Bootstrap-Misc
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?