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.
