在Wordpress主菜单链接上更改悬停颜色

Question

I have small issue with my main menu.

I want to update my hover color when close to menu item. Currently menu color is white on black background, but when close to menu item, it going black also, and its not visible at all. I tryed to update color in this way:

    .piko-layout-header .piko-navbar .piko-mega-menu.piko-mega-menu- 
    light.dark>.nav.navbar-nav>li .dropdown-menu>li>a:hover {
     color:#fff;
     } 

but seems do not make any change. To explain better with image:

Thanks!!

Answer 1

One thing I despise about so many custom built in CSS styles is the unnecessarily heavily selectors that overwrite each other.

Here's the current CSS that's styling it black:

/*... */
.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover,
/*...*/ {
    color: #141414 !important
}

Blech. You can confirm this by opening dev tools and adding the :hover pseudo class to the link.

Stick this in your CSS after the skin-green-dark file or in the Appearance > Customizer > Additional CSS:

.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
    color: #fff !important;
}

If that's still being overwritten it means it's been overwritten with that selector above, and you can make yours a bit heavier with more specificity by changing it to:

header.piko-layout-header .piko-navbar .piko-mega-menu > .nav.navbar-nav > li > .piko-link:hover {
    color: #fff !important;
}

These hyper specific selectors become such a hassle especially when they start throwing !important around that they become incredibly tedious to overwrite.