JSFiddle - React, Tailwind, and code Playground

HTML

<div id='dropdown' class=dropdown>
  <span id='control' class="dropdown-control">Select option</span>
  <ul class="dropdown-menu">
    <li class="clickable">Option 1</li>
    <li class="clickable">Option 2</li>
    <li class="clickable">Option 3</li>
    <li class="clickable">Option 4</li>
  </ul>
</div>
<span style="margin-left: 100px;">Selected option = <span id="selected">Option 1</span></span>

CSS

.clickable {
  color: #a0a;
}

.clickable:hover {
  cursor: pointer;
  color: #ada;
}

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

.dropdown .dropdown-menu {
	position: absolute;
	display: none;
	list-style: none;
	padding: 0;
	top: 0%;
	left: 0%;
	margin: 0;
}

.dropdown-selected {
	color: #ada;
}

.dropdown:hover .dropdown-control {
	opacity: 0;
}

.dropdown:hover .dropdown-menu {
	display: block;
}

.dropdown.hide .dropdown-menu {
  display: none;
}

JavaScript

const menu = document.getElementById('dropdown');
const control = document.getElementById('control');

const lis = document.getElementsByClassName("clickable");
Array.prototype.forEach.call(lis, function(li){
	li.onclick = selectOption;
})

function selectOption(event){
  window.selected.textContent = event.target.textContent;
  menu.classList.toggle('hide');
  menu.onmouseleave = function(){
  	menu.classList.toggle('hide');
    menu.onmouseleave = null;
    control.style.opacity = "";
  }
  control.style.opacity = 1;
}