Highlight Active Menu-item when Sub-Menu is Hover

Dear Support I customised my menu colors and would like to give a white background to my menu item.

It work when I hover it but it doesn’t work when I’m on the submenu.

I would like to keep it white even when the submenu is active and not only when hovering the menu item.

Seems I way use something like .menu-ancestor class, but can’t make it works.

Check the capture

Attachments:

You must be logged in to view attached files.

Hello,

You can use current-menu-item CSS class that added to li element of the active page.

Regards

Hi Guys,

I used that custom css : `.basel-navigation .menu li.current-menu-item > a :active{
background-color:#bda474!important;
}`

It makes my active menu-item background white when I’m hover it but it doesn’t work when I hover the sub-menu (mega menu with html bloc)

How can I do ? can you provide me the good css ?

Hi,

Try this one

.basel-navigation .menu li.current-menu-item > a {
background-color:#bda474!important;
}

Regards

Hi Guys,

The CSS you provided don’t do what I’m seeking for.

It highlights only the current active page.

I would like to color the my main menu-item when I explore the corresponding sub-menu.

Do you understand what I mean ?

Thanks

OK, try to use this example

.basel-navigation .menu li:hover > a {
background-color:#bda474!important;
}

Thank you !!!! 🙂

You are welcome!

[Author]

Posts