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-list {
   position: absolute;
   top: calc(100% + 3px);

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

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

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

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

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

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
```

```dropdown.js
var toggleTheList = function(event) {
   var theBtn = event.target;
   var theList = theBtn.nextElementSibling;

   var theListIsHidden = theList.className.includes('hidden');
   if (theListIsHidden)
      theList.className = 'dropdown-list shown';
   else
      theList.className = 'dropdown-list hidden';
};

var hideOtherLists = function(event) {
   var theBtn = event.target;
   var theList = theBtn.nextElementSibling;

   var allList = document.getElementsByClassName('dropdown-list');
   var allListArray = Array.from(allList);
   var otherLists = allListArray.filter(function(oneList) {
      return oneList != theList
   });
   
   otherLists.forEach(function(oneList) {
      oneList.className = 'dropdown-list hidden';
   });
};

/* Main function */

var toggleList = function(event) {
   toggleTheList(event);
   hideOtherLists(event);
};

/* Binding to buttons */

var btnList = document.getElementsByClassName('dropdown-btn');
var btnArray = Array.from(btnList);

btnArray.forEach(function (btn) {
   btn.onclick = toggleList;
});