dropdown.css

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

   /* Typography */

.dropdown-button,
.dropdown-item {
   font-family: Arial, sans-serif;
   font-size: 16px;
}

.dropdown-button {
   font-weight: bold;
   letter-spacing: 1px;
}

.dropdown-item {
   text-decoration: none;
}

   /* Colors & Borders */

body {
   --color-accent: royalblue;
   --color-hover: dodgerblue;
   --color-text: white;
}

.dropdown-button,
.dropdown-item {
   color: var(--color-text);
   background: var(--color-accent);
}

.dropdown-button:hover,
.dropdown-item:hover {
   background: var(--color-hover);
}

.dropdown-button {
   border: none;
}

.dropdown-item {
   border-bottom: 1px solid var(--color-hover);
}

   /* Sizing */

.dropdown-button {
   display: inline-block;
   padding: 15px 30px;
   min-width: 42px;
   cursor: pointer;
}

.dropdown-list {
   display: inline-block;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 345px;
   padding: 15px 25px;
}

   /* Positioning */

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

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);
}

.dropdown-list.left {
   right: auto;
   left: 0;
}

.dropdown-list.right {
   right: 0;
   left: auto;
}

   /* States & Transitions */

.dropdown-list {
   overflow: hidden;
   transition: max-height 0.45s;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-list.shown {
   max-height: 420px;
}