Trouble with Hover Menu, Want Hover on top level and click on sub level

[hybrydstore]

Hey guys,

So, I've got a hover menu for my store. 

Here is the code:

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

The problem I'm having is that when hovering over submenu items, it opens them straight away.

I would like only the top-level menu to be hover, but for sections underneath to be click to expand.

So, for example, you hover on 'Women's' and the menu appears.

But then when hovering on 'Tops' under 'Women's', I don't want anything to happen, and right now it's automatically expanding on hover, I want customers to have to click.

Also, I don't like that you can have several of them open at the same time, so I can open up tops, bottoms, each sub menu at the same time, but I want it so that if you open tops, it closes bottoms and just gives you a clear view of that one sub category.

Is there a way so that when you open one submenu it closes all the others?

If I can implement these two things the menu will be perfect.

Let me know of any solutions, thanks everyone.

[theycallmemakka]

Hi @hybrydstore,

Can you provide link to the store?