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

Shopify Discussion

Topic summary

Main issue: Store’s navigation uses a hover-driven dropdown, but submenus also expand on hover. The goal is hover-to-open only for top-level items and click-to-expand for sub-level items, plus ensuring only one submenu is open at a time (accordion behavior).

Context/tech: A JavaScript snippet attaches mouseover/mouseleave handlers to all .header__inline-menu details elements, setting/removing the open attribute. This causes nested submenus to open immediately on hover. Code snippet is central to understanding the behavior.

Requested changes:

  • Limit hover behavior to top level; require click for deeper submenu expansion.
  • When one submenu opens, automatically close any others.

Current status: No solution provided yet. A responder asked for a store link to investigate further. Discussion remains open, pending more details and implementation guidance.

Summarized with AI on December 31. AI used: gpt-5.
1

Hey guys,

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

Here is the code:

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.

2

Hi @hybrydstore ,

Can you provide link to the store?