Enable Hover Over Menu List Items that Stay Dawn Theme

[Jaclyn2]

Hello!

I am using the dawn theme and have used this code below to create a hover feature when your mouse hovers over menu list items in the header. Pasted in header.liquid file after the section about sticky header line 602. 

<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>

This code worked, however, when you hover over the menu list items, the drop down immediately disappears when you try to click on something. I was hoping to be able to make the drop down menu items stay when you first hover over an a parent menu item. 

[Kani]

Hi @Jaclyn2 

you can follow this tutorial, pls feedback if there are something I have not explained clear 🙂

https://kaniwong.github.io/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/