Sub-menu custom hover colour

  • Hey guys,

    I’ve configured my WP website to use different BG colours for individual menu items but the hover colour of the sub-menu items use the theme set default colour.

    Using the following code, I’ve set the contact menu item to a custom colour using the CSS file;

    #menu-item-8973 {background-color: #de004e !important;} /*Contact*/

    However I now need items 8470 and 8472 to use the BG colour of #de004e when hover.

    Here’s a snippet of the html layout;

    <li id="menu-item-8973" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item block-1 block-h-half menu-item-8973"><a href="#"><span>Contact</span></a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-8470" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8470" style="opacity: 1;"><a href="#" target="_blank" rel="nofollow"><span>General enquiries</span></a></li>
	<li id="menu-item-8472" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8472" style="opacity: 1;"><a href="#" target="_blank" rel="nofollow"><span>Submit your content</span></a></li>
</ul>
</li>

    Thank you for any help in advance

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to use the CSS ‘:hover’ (pseudo) selector: https://www.w3schools.com/cssref/sel_hover.asp

    Thread Starter deanljbirch

    (@deanljbirch)

    Thank you Andrew,

    Sadly this didn’t help as all menu items started using the colour.

    This needs to be specifically for id=”menu-item-8470″ & id=”menu-item-8472″ on hover.

    Once again, thank you for your input.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Did you try this:

    
/*Contact*/
#menu-item-8973:hover {
    background-color: #de004e !important;
}

    Or even better apply it to the anchor for wider browser support:

    
/*Contact*/
#menu-item-8973 a:hover {
    background-color: #de004e !important;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Also where are you making these CSS modifications?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sub-menu custom hover colour’ is closed to new replies.