JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.js"></script>
<body>
  <meta charset="utf-8">
  <div id="menus">
    <nav id="menu-1">
      <a href="#" class="menu-link">Link 1a</a>
      <a href="#" class="menu-link">Link 2a</a>
      <a href="#" class="menu-link">Link 3a</a>
      <a href="#" class="menu-link">Link 4a</a>
    </nav>
    <nav id="menu-2">
      <a href="#" class="menu-link">Link 1b</a>
      <a href="#" class="menu-link">Link 2b</a>
      <a href="#" class="menu-link">Link 3b</a>
      <a href="#" class="menu-link">Link 4b</a>
    </nav>
    <nav id="menu-3">
      <a href="#" class="menu-link">Link 1c</a>
      <a href="#" class="menu-link">Link 2c</a>
      <a href="#" class="menu-link">Link 3c</a>
      <a href="#" class="menu-link">Link 4c</a>
    </nav>
    <nav id="menu-4">
      <a href="#" class="menu-link">Link 1d</a>
      <a href="#" class="menu-link">Link 2d</a>
      <a href="#" class="menu-link">Link 3d</a>
      <a href="#" class="menu-link">Link 4d</a>
    </nav>
    <nav id="menu-5">
      <a href="#" class="menu-link">Link 1e</a>
      <a href="#" class="menu-link">Link 2e</a>
      <a href="#" class="menu-link">Link 3e</a>
      <a href="#" class="menu-link">Link 4e</a>
    </nav>
    <nav id="menu-6">
      <a href="#" class="menu-link">Link 1f</a>
      <a href="#" class="menu-link">Link 2f</a>
      <a href="#" class="menu-link">Link 3f</a>
      <a href="#" class="menu-link">Link 4f</a>
    </nav>
  </div>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508px" height="500px" viewBox="0 0 508 500" enable-background="new 0 0 508 500" xml:space="preserve">
    <g>
      <a xlink:href="xxx" xlink:title="..">
        <path id="1" onmouseover="document.getElementById('1').style.opacity = '0.5'" onmouseout="document.getElementById('1').style.opacity = '1'" fill="#926CAC"...

CSS

#menus nav {
  background-color: #EEE;
  width: 200px;
  min-height: 100px;
  border: 1px solid #DDD;
  border-radius: 6px;
  position: absolute;
  display: none;
}

#menus nav a {
  font-family: sans-serif;
  color: #333;
  text-decoration: none;
  height: 20px;
  display: block;
  padding: 10px;
  border-bottom: 1px solid #DDD;
}

#menus nav a:last-child() {
  border-bottom: 0;
}

#menus nav a:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

JavaScript

$(document).ready(function() {
  $("path").on("click", function(event) {
    var id = $(this).attr("id");

    if ($("#menu-" + id).css("display") == "block") {
    	$("#menu-" + id).css({"display": "none"});
    } else {
      var x = event.clientX;
      var y = event.clientY;
      $("#menu-" + id).css({
        "top": y + "px",
        "left": x + "px",
        "display": "block"
      });
    }
  });
});