How TO - Clickable Dropdown

Learn how to create a clickable dropdown menu with CSS and JavaScript.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create a Clickable Dropdown

Create a dropdown menu that appears when the user clicks on a button.

Step 1) Add HTML:

Example Explained

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it.

Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example Explained

We have styled the dropdown button with a background-color, padding, hover effect, etc.

The.dropdown class usesposition:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (usingposition:absolute).

The.dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note themin-width is set to 160px. Feel free to change this.Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set thewidth to 100% (andoverflow:auto to enable scroll on small screens).

Instead of using a border, we have used thebox-shadow property to make the dropdown menu look like a "card". We also use z-index to place the dropdown in front of other elements.

Step 3) Add #"myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}