Menu a:hover Change Background Color

[Andrea]

Andrea

August 22, 2019 at 6:22 pm

Hello,

Is there a way to have different colors appear on a:hover for the main menu? The person I am working with really liked this theme: *Login to see link and the hover appearance, but we decided to go with Virtue because of its overall functionality (the portfolio page setup was the big deciding choice).

Changing the following code has enabled the a:hover color to be for all the menu items, but I cannot seem to get a nth statement to work.

.kad-header-style-three #nav-main ul.sf-menu > li > a:hover{
color: white;
background-color: #ED1C24;
}

I would like to hover over the menu items and see different color appear on the background: Home – Red, About – Green, Yellow, etc. I’d also like to possibly add the hover color as a border-bottom for when inactive.

Thank you,
Andrea