我試圖有一個菜單，我可以在菜單選項之間切換。然而，我目前遇到的問題是，當我點擊左上角，然后右上角，然后回到左上角，右上角的子菜單保持活動狀態，我看不到左上角的菜單選項。當您嘗試在它們之間來回切換時，右上角的菜單選項會保持打開。

// Get all the dropdown elements
var dropdowns = document.querySelectorAll(".dropdown a");
var submenuContainers = document.querySelectorAll(".submenu-container");

// Add event listeners to the dropdown elements
for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener("click", function (event) {
    console.log("Dropdown clicked:", this);
    // Prevent default behavior of the anchor tag
    event.preventDefault();

    // Hide all submenu containers
    for (var j = 0; j < submenuContainers.length; j++) {
      submenuContainers[j].style.display = "none";
    }

    // Show the clicked submenu container
    var submenuContainer = this.nextElementSibling;
    submenuContainer.style.display = "block";
    console.log("Showing submenu container:", submenuContainer);

    // Hide the clicked submenu container when clicking outside the dropdown
    var hideSubmenu = function (event) {
      var isClickInsideDropdown = this.closest(".dropdown");
      if (!isClickInsideDropdown) {
        submenuContainer.style.display = "none";
        console.log("Hiding submenu container:", submenuContainer);
        document.removeEventListener("click", hideSubmenu);
      }
    };
    document.addEventListener("click", hideSubmenu);
  });
}

ul {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f1f1f1;
    }

    li {
      list-style: none;
      float: left;
    }

    li a,
    .dropdown-btn {
      display: inline-block;
      color: #666;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      position: relative;
    }

    li a:hover,
    .dropdown:hover .dropdown-btn {
      background-color: #ddd;
    }

    .dropdown-container {
      display: none;
      position: absolute;
      top: 4.2vw;
      left: 3.2vw; /* Update this line */
      background-color: #f9f9f9;
      min-width: 24vw;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-container a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

      .dropdown-container a:hover {
      background-color: #f1f1f1;
    }

    .active {
      background-color: #f1f1f1;
    }

.submenu-container a {
  color: black;
  padding: 1px 1px; /* Adjust the padding values as desired */
  text-decoration: none;
  display: block;
}

<ul>
    <li class="dropdown">
      <a href="#" class="active">Top Left</a>
      <div class="dropdown-container">
        <div class="dropdown-menu">
          <a href="#" >Surface and Precipitation</a>
          <div class="submenu-container">
            <a href="#" >Surface</a>
          </div>
          <a href="#">Upper-Air: Dynamics</a>
          <div class="submenu-container">
            <a href="#" >Vorticity</a>

          </div>
          <a href="#" >Upper-Air Temperature/Wind</a>
          <div class="submenu-container">
            <a href="#" >Temperature</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#">Top Right</a>
      <div class="dropdown-container">
        <div class="dropdown-menu">
          <a href="#" class="submenu-option">Submenu 1</a>
          <div class="submenu-container">
            <a href="#">Submenu 1 Option 1</a>
          </div>
          <a href="#" class="submenu-option">Submenu 2</a>
          <div class="submenu-container">
            <a href="#">Submenu 2 Option 1</a>
          </div>
          <a href="#" class="submenu-option">Submenu 3</a>
          <div class="submenu-container">
            <a href="#">Submenu 3 Option 1</a>
          </div>
        </div>
      </div>
    </li>
  </ul>