.dropdown {
  position: relative;
  display: inline-block;
  margin-left: auto;
  white-space: nowrap;
}

.dropdown > input[type="checkbox"] {
  display: none;
}

.dropdown > label {
  display: flex;
  width: 8em;
  padding: 6px 15px;
  background-color: rgb(241, 241, 241);
  line-height: 1.5em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.dropdown > label:after {
  content: "⯆";
  margin-left: auto;
}

.dropdown > ul {
  position: absolute;
  top: 37px;
  background-color: rgb(241, 241, 241);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  width: 100%;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  display: none;
}

.dropdown > ul a {
  display: block;
  padding: 6px 15px;
  text-decoration: none;
  color: rgb(34, 34, 34);
}

.dropdown > label:hover,
.dropdown > ul a:hover {
  background-color: rgb(221, 221, 221);
}

.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
  display: block;
}

.dropdown > [type="checkbox"]:checked + label:after,
.dropdown > ul:target ~ a:after {
  content: "⯅";
}