dropdown.css

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

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 31px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-btn.secondary {
   background: DarkGray;
}

.dropdown-btn.secondary:hover {
   background: LightGray;
}

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

   overflow: hidden;
   transition: max-height 0.5s;
}

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

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

.dropdown-list > a {
   display: block;
   width: 259px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-list > a:hover {
   background: DodgerBlue;
}