Hover effect issue.

[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

[EBOOST]

Hi @CreatorTim ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Snippets/header-dropdown-menu.liquid
3. Find summary tag

4. Wrap a tag outside link title

5. You can refer screenshot below:

the top level  has been wrapped by  <a href="{{ link.url }}">

the child level has been wrapped by <a href="{{ childlink.url }}">

[CreatorTim]

Hey, it works, BUT I don’t know why "Products" is highlighted in purple, and when I click on it, it flashes red. Also, when I click on another menu item or sub-menu item, sometimes an underline flashes there as well.

How can I fix this?

Here are the photos of how I wrapped it in the edit code:

And here’s my store URL so you can check it: https://1049xn-ya.myshopify.com/

Thanks a lot for your help,
Tim

[EBOOST]

Hi,

May I suggest add code below to end of  Assets/base.css file

.header__menu-item a{
	text-decoration: none!important;
	color: rgba(var(--color-foreground),.75);
	outline: none !important;
    box-shadow: 0 0 0 !important;
}
.header__menu-item a:hover {
	color: rgb(var(--color-foreground));
}
body .header__menu-item {
	outline: none !important;
  	box-shadow: 0 0 0!important;
}
body .header__menu-item:hover::after {
	display: none;
}

[CreatorTim]

Hey, thanks! It works, but it removed all the decorations. I had a dot under the menu items, and I’d like to keep it there.

Would you be able to bring the dot back under the menu items, but only for the menu items (not the sub-items) and without the other decorations?

Thank you so much, I really appreciate your help.
Tim

[EBOOST · Accepted solution]

Hi,

You can refer screenshot below to update code.

[CreatorTim]

Thank you so much. It's working.

I really appreciate it.
Tim