My dropdown close automatically when the mouse leaves i am unable to click on sub-menu help me

[odejia9587]

i have added the hover effect on the header but the drop-down menu item leaves before i can click on them so it's like showing sub-menu on hover but it couldn't get open.store url 

let items = document
    .querySelector(".header__inline-menu")
    .querySelectorAll("details");

for (const item of items) {
    // Open the dropdown on hover
    item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    // Close the dropdown when mouse leaves the whole item (dropdown box)
    item.addEventListener("mouseleave", () => {
        item.removeAttribute("open");
    });
}
"i have inserted this Js Script for hover effect"

[topnewyork]

Hi @odejia9587 ,

Try the below code please

let items = document
    .querySelector(".header__inline-menu")
    .querySelectorAll("details");

for (const item of items) {
    item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    item.addEventListener("mouseleave", (event) => {
        const submenu = item.querySelector("ul");
        if (!submenu || !submenu.contains(event.relatedTarget)) {
            item.removeAttribute("open");
        }
    });

    item.querySelector("ul").addEventListener("mouseover", () => {
        item.setAttribute("open", true);
    });

    item.querySelector("ul").addEventListener("mouseleave", (event) => {
        if (!item.contains(event.relatedTarget)) {
            item.removeAttribute("open");
        }
    });
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[BSSCommerce-B2B]

@odejia9587, You can use this code to keep the submenu visible when the mouse leaves.

let items = document.querySelectorAll(".header__inline-menu details");
items.forEach(item => {
  let closeTimeout;

  item.addEventListener("mouseover", () => {
    clearTimeout(closeTimeout);
    item.setAttribute("open", true);
  });

  item.addEventListener("mouseleave", () => {
    closeTimeout = setTimeout(() => {
      item.removeAttribute("open");
    }, 400);
  });
  item.querySelector("ul").addEventListener("mouseenter", () => {
    clearTimeout(closeTimeout)
  });

  item.querySelector("ul").addEventListener("mouseleave", () => {
    closeTimeout = setTimeout(() => {
      item.removeAttribute("open");
    }, 400);
  });
});

[odejia9587]

i applied it but it working with a little bit of lag or delay

[BSSCommerce-B2B · Accepted solution]

@odejia9587, change the code like this

let items = document.querySelectorAll(".header__inline-menu details");
items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  });

And add this code before </body> tag in theme.liquid file 

<style>
 header-menu [open] summary:after {
  content: "";
  position: absolute;
  height: 2em;
  top: 3em;
  left: -2em;
  right: -2em;
 }
</style>

[odejia9587]

Thank you so much for helping i have searched it for everywhere