CSS Dropdowns

CSS Dropdowns

Create a hoverable dropdown menu with CSS.

Example 1: Basic Dropdown

Move the mouse over the element below to open the dropdown content.

Example 2: Dropdown Menu

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

Example 3: Right-aligned Dropdown Content

If you want the dropdown content to go from right to left, add right: 0;

.dropdown:hover .dropdown-content {
  display: block;
}