css-sandbox/dropdown/dropdown.css

.dropdown {
  position: relative;
  display: flex;
}
ul {
  margin: 0;
  padding: 0;
}

.dropdown__menu {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  margin-top: 0.5em;
  z-index: 3;
  white-space: nowrap;
  background-color: var(--dropdown-background);
  border: solid 1px #aaa;
  border-radius: 5px;
}

.dropdown__menu--hidden {
  display: none;
}

.dropdown__trigger {
  cursor: pointer;
  align-self: flex-start;
  padding: 0.5em;
}

.dropdown__trigger:hover, .dropdown__trigger--active {
  background-color: var(--dropdown-background-highlight);
}

.dropdown__item {
  padding: 0.7em;
  cursor: pointer;
  text-decoration: none;
}

.dropdown__item:hover {
  background-color: var(--dropdown-background-highlight);
}