Different Hover colors for main menu

Problem

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!!

Problem courtesy of: user3873322

Solution

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;
}
Solution courtesy of: eirenaios

Discussion

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

Discussion courtesy of: sneeky

This recipe can be found in it's original form on Stack Over Flow.