Meny Drop Down Color's

Say I have 3 or 4 or 5 menu items... each with drop downs menu items... how do I make each menu item have a different color when someone scrolls down the drop down items... for Example - I have 4 links in the main nav... each link has a sub menu... as someone scrolls through these sub category menu items - the background color is different for each menu section... ie - all the sub categories are blue in one main link dropdowns... are red in the drop down background for the other main link, etc, etc. I heard that using the nth CSS selector works but can't get it to work.

Could you please post an url to your site?

Could you please post an url to your site?

Thanks for the quick response. I can't post this site as it's local and not ready to put it out there yet... but don't really need to post it... pretty straight forward question... let me use one of the demo's as an example. let's take for example News 2... you see how you have Home, Template, Politics, Sport, Lifestyle, Videos and EasyBlog in the main nav... I would like when a person scrolls down the navigation items in a section that it be a different color. For example, Template would be blue... if Politics had a drop down - those drop down menu items would be red... so on and so forth... Lets use Game Template... you have Games, Reviews, Features, Blog... when soeone hovers over Games nav... and say hovers over Nintendo - the background would turn say RED and also RED when they hover over PlayStation... and Red for Xbox, and Mobile... but if they hover over Template... the background for the sub menu's would be say blue... and maybe Green for EasyBlog... not just the text changing color but the background for that line item. Check out the Music State Template - see how when you hover over a sub menu item it turns a slightly different color... I would like it for say Pages to have it's drop down be blue... Features be red, Blog be green, Typography yellow, etc, etc.

Can you reply to my latest reply please... thanks

Without link to a live site I can only sat that you need to use override.css and create selectors with use of nth child.
With sample news2 template it works this way:

Code: Select all

.gkMenu > ul > li:nth-child(2) a {
   background: red;
   color: blue;
}
.gkMenu > ul > li:nth-child(2) div.childcontent {
   background: red;
}


etc.

I gave you a bunch of example sites... any of your demo sites with a top nav... they are all done pretty much the same. The code you provided is just for the first one right? What about the next menu item's color?

You change 2 to 3 etc and create more css declarations for each element.