JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <canvas class="webgl"></canvas>
  <div class="loading-bar"></div>
  <nav class="menu">
    <li>
      <div class="point point-0">
        <div class="point"></div>
        <ul>
          <li><h1 href="#">num</h1></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
</body>

CSS

.point {
    position: absolute;
    top: 50%;
    left: 50%;
}
.menu ul {
    background: rgb(255, 255, 255);
    height: 0px;
    opacity: 0;
    position: absolute;
    transition: .5s ease-in-out;
    transition-delay: 0.2s;
}
.menu li:hover ul {
    width: 300px;
    height: 200px;
    top: 30px;
    left: 30px;
    opacity: 1;
}
.menu li {
    list-style-type: none;
}
.menu ul li a {
    list-style-type: none;
    text-decoration: none;
    text-align: left;
    color: rgb(66, 66, 66);
}
.menu ul li h1 {
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: none;
    text-decoration: none;
    text-align: left;
}
.point div {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #999;
    z-index: 1;
    cursor: grab;
}
.point:hover div {
    background: #000;
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 2;
    cursor: grab;
}
nav.menu {
    visibility: hidden;
}
nav.menu.visible {
    visibility: visible;
}