JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
<tr>
<th>Hdr1</th><th>Hdr2</th><th>Hdr3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Auswahl 1</td><td>Auswahl 2</td><td>Auswahl 3</td>
</tr>
</tbody>
</table>

SCSS

table, th, td {
  position:relative;
}
th, td {
  border:1px solid;
  padding:5px;
}
td, li {
  cursor:pointer;
}
td ul {
  padding:10px;
  width:120px;
  position:absolute;
  border:1px solid red;
  background:#F5F5F5;
}
li {
  padding:2px 7px;
}
li:hover {
    background:#BBB;
}

JavaScript

var OutList = '<ul>'
            + '<li>first item</li>'
            + '<li>second item</li>'
            + '<li>third item</li>'
            + '<li>four item</li>'
            + '</ul>';

$("td").on("click", function(event){
    $("td ul").remove();
    $(this).append(OutList);
});