CSS Dropdowns

The Basic Idea

A dropdown menu consists of a container (the "dropdown") and the content that appears on hover (the "dropdown-content"). The dropdown content is hidden by default (display: none;) and is shown when the user hovers over the parent container (display: block;).

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

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