Open In App

How to open dropdown menu on hover in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
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.

  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 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=
        <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>

    
    

    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:




    <!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>

    
    

    Output:
    Before moving mouse to the dropdown:

    After moving mouse to the dropdown:



Last Updated : 26 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads