Hover Effect Issue: Prevent dropdown menu from triggering on click

[CreatorTim]

Hi guys, I need help fixing the hover effect.

When I hover over the menu item "Products" the menu with the sub-items (products) slides out normally. However, when I want to access the overall product overview by clicking on "Products" the menu opens/closes instead.

Right now, the effect works on both hover and click, so I can’t just go to "Products."

I want to activate the menu only on hover so I can click on "Products" to access the product overview.

Here’s my store URL: https://1049xn-ya.myshopify.com/

And here’s the code I used for the effect:

<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("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");
});
});

});
</script>

Thank you!

Tim

[ZestardTech]

Hello @CreatorTim,

You can start by trying this helpful guide: Adding Animations to Header. It provides some useful steps that might help you achieve the desired hover and click functionality for your menu.

Feel free to reach out if you need any further assistance!