How to open dropdown menu on hover in Bootstrap ?

Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods.

  1. 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 occurrance
    • 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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <script src=
      </script>
        <script src=
      </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>

    chevron_right

    
    

    Output:
    Before moving mouse to the dropdown:

    After moving mouse to the dropdown:

  2. Using the CSS property
    Section of code to be used in the program

    .dropdown:hover .dropdown-menu {
      display: block;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>How to open dropdown 
          menu on hover in Bootstrap</title>
        <link href=
              rel="stylesheet" />
        <script src=
      </script>
        <script src=
      </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>

    chevron_right

    
    

    Output:
    Before moving mouse to the dropdown:

    After moving mouse to the dropdown:



My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.