How to Create: Hoverable Dropdown Menu

Learn how to create a hoverable dropdown menu using CSS.

Create a hoverable dropdown menu

Create a dropdown menu that displays the menu when the user hovers over the element.

Step 1 - Add HTML:

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Example explanation:

Open the dropdown menu using any element, such as <button>, <a>, or <p> elements.

Create a dropdown menu using a container element (such as <div>) and add dropdown menu links within it.

Wrap the button and <div> elements using a <div> element to properly position the dropdown menu with CSS.

Step 2 - Add CSS:

/* Dropdown button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Container <div> - used for positioning the dropdown menu content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links within the dropdown menu */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change the color of the dropdown menu link when the mouse hovers over it */
.dropdown-content a:hover {background-color: #ddd;}
/* Display the dropdown menu when the mouse hovers over it */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is displayed */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Try it yourself

Example explanation:

We have set the style for the dropdown menu button with background color, padding, etc.

.dropdown class uses position: relative, when we want to place the dropdown menu content directly below the dropdown menu button (using position: absolute), which is necessary.

.dropdown-content class contains the actual dropdown menu. It is hidden by default and will be displayed when the mouse hovers over it (see below). Note that the minimum width is set to 160px. Feel free to change this setting. Tip: If you want the width of the dropdown menu content to be the same as the dropdown menu button, set the width to 100% (and set overflow: auto to enable scrolling on small screens).

We did not use borders but used box-shadow property to make the dropdown menu look like a 'card'. We also use z-index Place the dropdown menu in front of other elements.

:hover Selector is used to display the dropdown menu when the user moves the mouse over the dropdown menu button.

Related Page

Tutorial:CSS Dropdown Menu

Tutorial:How to Create Clickable Dropdown Menu