I have issue which is the dropdown menu is slightly misaligned or detached from the “Other” tab, I want it to be directly under the “Other” tab, with an arrow pointing to it.

HTML CODE:

    </li>
          <li class="dropdown">
            <div class="tooltip" id="otherTooltip">
              <a href="javascript:void(0);" onclick="toggleDropdown('otherDropdown')" class="navbar-link">Other</a>
              <span class="tooltiptext">Remain Taps</span>
            </div>
            <div id="otherDropdown" class="dropdown-content">
              <a href="https://discord.gg/NmqGZjr2">Discord Server</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </li>

<script>
    // Toggle dropdown visibility and disable tooltip when shown
    function toggleDropdown(id) {
      const dropdown = document.getElementById(id);
      const tooltip = document.getElementById('otherTooltip');
      dropdown.classList.toggle("show");
      tooltip.classList.toggle("disabled"); // Disable tooltip when dropdown is shown
    }

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.navbar-link')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
            document.getElementById('otherTooltip').classList.remove('disabled'); // Re-enable tooltip
          }
        }
      }
    }
</script>

CSS CODE:

  <style>

  /* Parent container to handle relative positioning */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute; /* Changed from fixed to absolute */
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 5px; /* Adjust to move dropdown away from the arrow */
  border-radius: 5px; /* Optional, to round corners */
  left: 0; /* Ensure dropdown aligns with parent */
  transform: translateX(0); /* Remove any extra shifting */
}

/* Add the arrow */
.dropdown-content::before {
  content: "";
  position: absolute;
  bottom: 100%; /* Position above the dropdown */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f1f1f1 transparent; /* Match dropdown background color */
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Add blue color on hover */
.dropdown-content a:hover {
  background-color: #e0e7ff;
  color: #007bff;
}

/* Add blue color when active (clicked) */
.dropdown-content a:active {
  background-color: #c3dafe;
  color: #0056b3;
}

/* Show the dropdown menu */
.show {
  display: block;
}

  </style>

this how the issue looks like: Image For my Issue i’m facting it
i want fixs or solution for this issue.
it shows in place elsewhere when i clicking on it, so i want it to move to be below “Other” tab.