Question

I am having an issue with applying css styles to dropdown navigation menus within WordPress using jQuery.

Basically, I have 5 navigation links. The intention is to have each of the dropdown links to have its own colour. The code I have used seems to work when, say for example, every link has a dropdown in place. However, if I have a dropdown only on the second link and also on the fourth link, then the fourth link dropdown colour uses the colour from the what the third dropdown colour would be ie nth-child(4) should use #37595c but instead uses the colour of nth-child(3). Any help with resolving this issue would be greatly appreciated. Code below:

$(document).ready(function(){
    $("#nav_main ul li:nth-child(1) ul.sub-menu a").css("background", "#9c1b36");
    $("#nav_main ul li:nth-child(2) ul.sub-menu a").css("background", "#808021");
    $("#nav_main ul li:nth-child(3) ul.sub-menu a").css("background", "#4a3349");
    $("#nav_main ul li:nth-child(4) ul.sub-menu a").css("background", "#37595c");
    $("#nav_main ul li:nth-child(5) ul.sub-menu a").css("background", "#41403e");  
});

Have replicated the issue in jsfiddle. If you hover over ‘Nav Two’ and then ‘Nav Four’ you will see that ‘Nav Four’ is using the colour of what would be used if ‘Nav Three’ was in effect: http://jsfiddle.net/cknz/vmRBp/3/

Answer 1

Use the > selector to make sure the ULs are children of #nav_main and the LIs are children of the ULs. And use nth-of-type instead of nth-child:

    $("#nav_main > ul > li:nth-of-type(1) a").css("background", "#9c1b36");
    $("#nav_main > ul > li:nth-of-type(2) a").css("background", "#808021");
    $("#nav_main > ul > li:nth-of-type(3) a").css("background", "#4a3349");
    $("#nav_main > ul > li:nth-of-type(4) a").css("background", "#37595c");
    $("#nav_main > ul > li:nth-of-type(5) a").css("background", "#41403e");