How to add a gray background on hover for sub-menu item

[CreatorTim]

Hi, how can I make it so that when I hover over the sub-menu item, a light gray background appears underneath it?

Here is the store where it works the way I want it to: https://tomnoske.store/
(The sub-menu items are under STORE)

And here is my store: https://1049xn-ya.myshopify.com/
(It’s under PRODUCTS)

Thanks a lot, I would really appreciate your help.

[Vinsinfo]

@CreatorTim Please follow the steps below to add a gray background on hover for sub-menu items. Let us know if this helps!

#1. From the Admin, go to “Online Store” → “Themes”.
#2. Click the “actions” button on the current theme and select “Edit Code”.
#3. Search for the “base.css” file, scroll to the bottom, and paste the following code:

header-menu details ul li a.list-menu__item:hover {
    background: rgba(73, 73, 73, 0.05);
}

Result will be,

If our solution works for you, please support us by clicking “Like” and “Accepted”. Thanks for your support!

[DaisyVo]

Hi @CreatorTim

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}

.header__submenu.list-menu > li:hover {
background: rgba(0, 0, 0, 0.1) !important;

}

{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Dan-From-Ryviu]

Hi @CreatorTim

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.header__submenu .header__menu-item {
transition: background .25s ease;
}
.header__submenu .header__menu-item:hover {
background: #4949490d
}