W3.CSS Dropdown

Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. W3.CSS also provides classes to make a smooth and responsive dropdown menu. There are two types of dropdown menu available i.e. hoverable and clickable. The classes available for dropdown are as follows:

Sr. No.	Class Name	Description
1.	w3-dropdown-content	It is used to make the content of the dropdown menu.
2.	w3-dropdown-hover	It is used to make a hoverable dropdown element.
3.	w3-dropdown-click	It is used to make a clickable dropdown menu.

Example: Creating a hoverable dropdown menu.

HTML

<!DOCTYPE html>
<html>

<head>

    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>

    <!-- w3-container is used to add 16px
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
           of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
    
    <!-- Hoverable Dropdown Menu in W3.CSS -->
    <div class="w3-container w3-center">
        <!-- Hoverable Dropdown Menu -->
        <div class="w3-dropdown-hover w3-round-large">
            <button class=
          "w3-button w3-hover-blue w3-pink w3-round-large">
                Hover Over Me!
            </button>
            <div class="w3-dropdown-content w3-bar-block w3-border">
                <a href="#" class="w3-bar-item w3-button">
                    Gfg
                </a>
                <a href="#" class="w3-bar-item w3-button">
                    GeeksForGeeks
                </a>
                <a href="#" class="w3-bar-item w3-button">
                  Geek
              </a>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Before Hover:

After Hover:

Example: Creating a clickable dropdown menu.

HTML

<!DOCTYPE html>
<html>

<head>

    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
    
    <!-- Function to show and hide dropdown menu -->
    <script>
        function show() {
          var x = document.getElementById("gfg");
          if (x.className.indexOf("w3-show") == -1) { 
            x.className += " w3-show";
          } else {
            x.className = x.className.replace(" w3-show", "");
          }
        }
    </script>
</head>

<body>
    <!-- w3-container is used to add 16px
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
          of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          GeeksForGeeks
      </h2>
    </div>
    
    <!-- Hoverable Dropdown Menu in W3.CSS -->
    <div class="w3-container w3-center">
        <!-- Hoverable Dropdown Menu -->
        <div class="w3-dropdown-click w3-round-large">
            <button onclick = "show()" 
                    class="w3-button w3-blue w3-round-large">
                Click Me!
            </button>

            <div id="gfg" 
                 class="w3-dropdown-content w3-bar-block w3-border">
                <a href="#" class="w3-bar-item w3-button">Gfg</a>
                <a href="#" class="w3-bar-item w3-button">
                    GeeksForGeeks
                </a>
                <a href="#" class="w3-bar-item w3-button">Geek</a>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Before Click:

After Click:

Explore