JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w3-dropdown-click">
<button class="w3-button" onclick="showContent('menuAdministrator')">
Administrator
</button>
<div id="menuAdministrator" class="w3-dropdown-content w3-bar-block w3-card-4" onmouseout="showContent('menuAdministrator', true)">
<a href="./administrator-request-management.php" class="w3-bar-item w3-button">Request Management</a>
<a href="./administrator-maintenance-mode.php" class="w3-bar-item w3-button">Maintenance Mode</a>
<a href="./administrator-ban-list.php" class="w3-bar-item w3-button">Ban List</a>
</div>
</div>

JavaScript

function showContent(id, mOut = false) {
  var ids = new Array ("menuUser", "menuModerator", "menuAdministrator");
  if (mOut) {
  document.getElementById(id).style.display = "none";
  } else {
  var length = ids.length;
  j = 0;
  for (j = 0; j < length; j++) {
  var close = ids[j];
  if (document.getElementById(close)) {
  if (id != close) {
  document.getElementById(close).style.display = "none";
  } else {
  document.getElementById(close).style.display = "block";
  }
  }
  }
  }
}