JSFiddle - React, Tailwind, and code Playground

HTML

<div class=dropdown>
  <span class="dropdown-control">Selectable Menu</span>
  <ul class="dropdown-menu">
    <li class="clickable" onclick="selectOption(event)">Option 1</li>
    <li class="clickable" onclick="selectOption(event)">Option 2</li>
    <li class="clickable" onclick="selectOption(event)">Option 3</li>
    <li class="clickable" onclick="selectOption(event)">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

function selectOption(event){
  window.selected.textContent = event.target.textContent;
  menu = event.target.parentElement.parentElement;
  menu.classList.toggle('hide');
  setTimeout(function(){menu.classList.toggle('hide');}, 100);
}

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