CODEWITHSUNDEEP
wordpresscss
user3873322
user3873322

Reputation:

Different Hover colors for main menu

I was working on this site MY Site . the menu bar shows a black color on hover .I need different colors to show on each menu item hover.I have tried the following code in my css but didn't work

nav.main_menu>ul>li:hover>a span:nth-of-type(1){background-color:#161f30 !important;}     nav.main_menu>ul>li:hover>a span:nth-of-type(2){background-color:#161f30 !important;}

also i tried 

nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}

this also didn't work.can anyone please help me to achieve this? Please!! Thanks!!

Upvotes: 2

Views: 568

Answers (2)

Suresh Karia
Suresh Karia

Reputation: 18218

Try this css

    nav.main_menu > ul > li:nth-child(1):hover {
    background:#ff0000 !important;
}
nav.main_menu > ul > li:nth-child(2):hover {
    background:#ff00ff !important;
}
nav.main_menu > ul > li:nth-child(3):hover {
    background:#ff0ff0 !important;
}
nav.main_menu > ul > li:nth-child(4):hover {
    background:#ff0aa0 !important;
}
nav.main_menu > ul > li:nth-child(5):hover {
    background:#ff0eee !important;
}
nav.main_menu > ul > li:nth-child(6):hover {
    background:#ff0dd0 !important;
}

Upvotes: 1

sneeky
sneeky

Reputation: 1508

Try the following

.main_menu > ul > li:nth-child(1):hover > a span {
    // styles
}

Better is to add classes to your nav elements.

.main_menu-home { // styles }
.main_menu-artists { // styles }

and so on

Upvotes: 1

Related Questions