JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul class="content">
  <li class="class1" id="id1"><span class="fa fa-cog"></span></li>
  <li class="class2" id="id2"><span class="fa fa-cog"></span></li>
  <li class="class3" id="id3"><span class="fa fa-cog"></span></li>
</ul>
<div id="menu" style="display: none;">
  <ul>
    <li id="showId">Show ID</li>
    <li id="showClass">Show Class</li>
  </ul>
</div>

CSS

body{padding-left:20px;}
li {
  cursor:pointer;
  list-style:none;
 }
 li:hover{color:green}
 ul{
   padding:0;
   position:reletive;
   
}
 
 #menu{
   position:absolute;
   top:0;
   left:50px;
 }

JavaScript

// Vitalii Volovich from UpWork
// work for vote

function showMenu(elem){
	$("#menu").toggle();
  $("#edit").on("click", function(){
  	alert(elem.attr("id"));
    return;
  })
}
$("span.fa").on("click", function(event){
	showMenu($(this).parent());
  var elemId =$(event.target).parent().attr("id");
  $("#menu").attr('data-class',$(event.target).parent().attr("class") );
  $("#menu").attr('data-id',elemId );
  switch (elemId) {
  	case "id1": setMenuTop('0px');break;
    case "id2": setMenuTop('20px');break;
    case "id3": setMenuTop('40px');break;
  }
  function setMenuTop(value){
  	$('#menu').css('top',value);
  }
 
});
 $("#menu li").on("click", function(event){
  	$("#menu").hide();
    if (event.target.innerHTML == "Show ID" ) {
    	alert($(event.target).parent().parent().attr("data-id") );
    }
    else alert($(event.target).parent().parent().attr("data-class") );
    
  })