CSS Dropdown Menu

Create a hoverable dropdown list using CSS.

Demonstration: Dropdown case

Example

Please move the mouse pointer over the following example:

Dropdown text

Hello World!

Link 1 Link 2 Link 3
Image:coffee
coffee
Coffee

Basic dropdown menu

Create a dropdown box that appears when the user moves the mouse over the element.

Example

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Try It Yourself

Example explanation:

HTML

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

Create dropdown content using container elements (such as <div>) and add any content inside.

Use the <div> element to enclose these elements and use CSS to correctly position the dropdown content.

CSS

.dropdown class position:relative，when we want to place the dropdown content directly below the dropdown button (using position:absolute）when needed, this class should be used.

.dropdown-content The class saves the actual dropdown menu content. By default, it is hidden and will be displayed when hovered (see below). Note that,min-width Set to 160px. This setting can be changed at any time. Tip: If you want the width of the dropdown content to be the same as the width of the dropdown button, set the width to 100％ (set overflow:auto Can be scrolled on the small screen).

We used CSS box-shadow property, not the border, so the dropdown menu looks like a "card".

When the user moves the mouse over the dropdown button,:hover The selector is used to display the dropdown menu.

Dropdown menu

Create a dropdown menu and allow users to select an option from the list:

Link 1 Link 2 Link 3

This example is similar to the previous one, except that we have added links inside the dropdown box and set their styles to match the style of the dropdown button:

Example

<style>
/* Set the style of the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Container <div> - needs to place the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* The dropdown content (default hidden) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Dropdown link */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change the color of the dropdown link when hovered */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu when hovered */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Show the dropdown content when the dropdown button is hovered, change the background color of the dropdown button */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<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>

Try It Yourself

Right-aligned Dropdown Menu Content

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3

If you want the dropdown menu to open from right to left instead of left to right, please add right: 0;:

Example

.dropdown-content {
  right: 0;
}

Try It Yourself

More Examples

1 - Dropdown Images

How to Add Images and Other Content in Dropdown Boxes.

Please hover the mouse pointer over the image:

coffee
coffee
Coffee

Try It Yourself

2 - Dropdown Navigation

How to Add Dropdown Menus in Navigation Bars.

Try It Yourself