<dl class="custom-dropdown" aria-expanded="false">
  <dt class="custom-dropdown__title" data-value="">Select a country</dt>
  <dd class="custom-dropdown__item" data-value="BR">Brazil</dd>
  <dd class="custom-dropdown__item" data-value="NL">Netherlands</dd>
  <dd class="custom-dropdown__item" data-value="ES">Spain</dd>
  <dd class="custom-dropdown__item" data-value="TK">Turkey</dd>
  <dd class="custom-dropdown__item" data-value="US">United States</dd>
</dl>

<select class="dropdown">
  <option value="">Select a country</option>
  <option value="BR">Brazil</option>
  <option value="NL">Netherlands</option>
  <option value="ES">Spain</option>
  <option value="TK">Turkey</option>
  <option value="US">United States</option>
</select>

<p class="console">Listener Select field change value: <span></span></p>
.custom-dropdown {
  $self: &;
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 2px solid;
  display: inline-flex;
  flex-direction: column;
  font-family: Arial, 'sans-serif';
  
  &__title,
  &__item {
    margin: 0;
    padding: 10px 20px;
  }
  
  &__title {
    display: block;
    
    #{$self}[aria-expanded="true"] &,
    #{$self}:hover &{
      color: red;
    }
  }
  
  &__item {
    display: none;
    
    &:hover {
      background: #dcdcdc;
    }
    
    #{$self}[aria-expanded="true"] & {
      display: block;
    }
  }
}

.console {
  padding: 10px;
  border: 1px dotted;
  font-family: Arial, 'sans-serif';
}
View Compiled 
class CustomDropDown {
  constructor() {
    this.customDropdown = document.querySelector('.custom-dropdown');
    this.customDropdownItems = [...this.customDropdown.querySelectorAll('.custom-dropdown__item')];
    this.dropdown = document.querySelector('.dropdown');
    this.console = document.querySelector('.console')
    
    this.init();
  }
  
  toggleCustomDropdown(evt) {
    const customDropDownEl = evt.currentTarget;
    const customDropDownStatus = customDropDownEl.getAttribute('aria-expanded');

    customDropDownEl.setAttribute('aria-expanded', customDropDownStatus === 'true' ? 'false' : 'true');
  }

  selectedCustomDropDown(evt) {
    const customDropDownClicked = evt.target;
    this.dropdown.value = customDropDownClicked.dataset.value;
  }

  showCountrySelected(evt) {
    this.console.querySelector('span').textContent = evt.target.value;
  }
  
  registerEvents() {
   this.customDropdown.addEventListener('click', this.toggleCustomDropdown.bind(this));
   this.dropdown.addEventListener('change', this.showCountrySelected.bind(this));

   this.customDropdownItems.forEach(item => {
      item.addEventListener('click', this.selectedCustomDropDown.bind(this));
    })   
  }
  
  init() {
    this.registerEvents();
  }
}

new CustomDropDown();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.