How to do hover dropdown menu without any bug?

Store Design
, ,
1

Hi guys, I want to hover the dropdown menu. But when I do it using the following code, it doesn’t allow it when going from the first option to the second option. Dropdown menu is closing, you can test it on the site.

I was using this code below:

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

My website: https://juweliermarkt24.ch/

2

I suggest using hover effect only on the parent menu and for submenu ( 2nd menu ) use toggle click.
And just want to let you know the script you share is accurate but the results are not like you expected.

3

How can I do that ? You can see my problem in here. I tried hovering in the mega menu, but when I hovered over it, the mega menu would disappear. @Guleria @CodingSolutions