jQuery: селектор nth-child ()

Question

У меня проблема с применением стилей CSS к выпадающим меню в Wordpress с использованием jQuery.

В основном у меня 5 навигационных ссылок. Намерение состоит в том, чтобы каждая из выпадающих ссылок имела свой собственный цвет. Код, который я использовал, работает, когда, например, каждая ссылка имеет выпадающий список. Однако, если у меня есть раскрывающийся список только для второй ссылки, а также для четвертой ссылки, тогда в раскрывающемся цвете четвертой ссылки используется цвет из того, что был бы для третьего раскрывающегося цвета, т.е. nth-child (4) должен использовать # 37595c, но вместо этого использует цвет nth-child (3). Любая помощь в решении этой проблемы будет принята с благодарностью. Код ниже:

$(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");  
});

Повторяли проблему в jsfiddle. Если вы наведите курсор мыши на «Nav Two» и затем «Nav Four», вы увидите, что «Nav Four» использует цвет того, что использовалось бы, если бы «Nav Three» действовал: http://jsfiddle.net/cknz/vmRBp/3/

Answer 1

Используйте селектор >, чтобы убедиться, что UL являются дочерними по отношению к #nav_main, а LI - дочерними по отношению к UL. И используйте nth-of-type вместо 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");