Why is this JS function running when it shouldn't?

Ok, so, pardon any mistake I may have made, since I'm still a beginner.

What I am trying to do is creating a drop-down menu for a website. I did manage to get it to appear on mouseover and disappear on mouseout, but I wanted to try and add a timeout to the disappearing part; problem is that as soon as I move my mouse outside of the top "gallery" part, the function to hide the menu starts running, even if I am still within the confines of the "menu".

I can get it to work fine without the setTimeout part (i.e. the menu closes only when I mouseout from the dropdown or the always-visible "gallery" button), but, as soon as I add that, the whole function activates as soon as I mouse out from the top always-visible "gallery" button.

Please, excuse the myriad of classes since I am using TailwindCSS.

HTML:

<header class="fixed w-full bg-green-300 z-20">
  <nav class="flex justify-between h-full items-center">
      <div class="flex">
          <a href="index.html" class="p-4 hover:bg-red-200">Home</a>
          <a href="About_us.html" class="p-4 hover:bg-red-200">About us</a>
          <!--This is the whole "menu"-->
          <div class="Gallery flex flex-col">
              <!--This is the top always-visible button-->
              <a href="Gallery.html" class="p-4 hover:bg-red-200">Gallery</a>
              <!--This is the drop-down menu that's currently hidden-->
              <div class="GalleryDropdown absolute flex flex-col bg-green-300 text-center mt-14 hidden">
                  <a href="Bouquet_and_personal_items.html" class="p-4 hover:bg-red-200">Bouquets</a>
                  <a href="Ceremonies.html" class="p-4 hover:bg-red-200">Ceremonies</a>
                  <a href="Misc_arrangements.html" class="p-4 hover:bg-red-200">Misc</a>
                  <a href="Receptions.html" class="p-4 hover:bg-red-200">Receptions</a>
              </div>
          </div>
          <a href="Contacts.html" class="p-4 hover:bg-red-200">Contacts</a>
      </div>
      <div class="flex">
          <a href="index.html" class="p-4 hover:bg-red-200">Dark</a>
      </div>
  </nav>
</header>

JS:

//Gallery dropdown

    //gallery nav button
    const gButton = document.querySelector('.gallery');
    //gallery dropdown menu
    const gDrop = document.querySelector('.GalleryDropdown');

    //gallery dropdown activate
    gButton.addEventListener('mouseover', () => {
        gDrop.classList.remove('hidden');
    });

    gButton.addEventListener('mouseout', () => {
        setTimeout( () => { 
            gDrop.classList.add('hidden');
        }, 500);
    });