Using for tutorials on codenart.github.io

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 30px;

   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: 108%;

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

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

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

.dropdown-list > a {
   display: block;
   min-width: 255px;
   max-width: 335px;
   padding: 15px 25px;

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

   text-decoration: none;
}

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