Nested lists inheriting code

[KeredDrahcir]

I'e using a nested list to give a Main Menu with a submenu but for some reason the submenu is heriting the style of the hover colour of the main manu even though I've defined a new style. Is there any way round this?

.mainmenu{
	background-color:#771dd4;
}
.mainmenu li{
	background-color:#771dd4;
}
.mainmenu li a{
	color:#ffffff;
} 
.mainmenu li:hover a{
	background-color: #3446c5;
}

.mainmenu ul ul{
	background-color: #6624f0;
	background-image: none;
}

.mainmenu li li{
	background-color: #6624f0;
	background-image:none;
}

.mainmenu li li:hover a{
	background-color: #3446c5;
	background-image: none;
}

[Rabbit]

Have you tried the !important tag so it overrides any inherited styles?

[KeredDrahcir]

It makes no difference. I've never had this problem before so I don't know why it's just appeared.

[Rabbit]

We would need to see the HTML to make any further progress.

Also, I'm not aware of any element other than anchor that uses the hover pseudo-class.

[Death Slaught]

You could try using more specific selectors and including the ancestor elements.

.mainmenu ul li>ul li:hover a {
    background-color: #3446c5;
    background-image: none;
}

Like Rabbit said, there is really no way to know for sure without the HTML.

Regards
Death