Два одинаковых компонента с разными шаблонами и css-файлами на одной странице

Здравствуйте!
На сайте (www.golden-eagles.ru) есть 2 горизонтальных меню - верхнее и нижнее.
Нужно ленту верхнего меню сделать бирюзовой, а ленту нижнего меню - салатовой.
Делаю 2 шаблона меню: horizontal_multilevel_turquoise и horizontal_multilevel_salad.
В css-файле бирюзового шаблона
(/bitrix/templates/golden-eagles/components/bitrix/menu/horizontal_multilevel_turquois­e/style.css)
прописываю
#horizontal-multilevel-menu li a.root-item
{
background:#33CCCC;
}
а в css-файле салатового шаблона
(/bitrix/templates/golden-eagles/components/bitrix/menu/horizontal_multilevel_salad/st­yle.css)
прописываю
#horizontal-multilevel-menu li a.root-item
{
background:#99ff66;
}

В header шаблона сайта прописываю
<?$APPLICATION->IncludeComponent("bitrix:menu", "horizontal_multilevel_turquoise", array(
"ROOT_MENU_TYPE" => "top_new",
"MENU_CACHE_TYPE" => "N",
"MENU_CACHE_TIME" => "3600",
"MENU_CACHE_USE_GROUPS" => "Y",
"MENU_CACHE_GET_VARS" => array(
),
"MAX_LEVEL" => "1",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "N",
"ALLOW_MULTI_SELECT" => "N"
),
false
);?>
а в footer -
<?$APPLICATION->IncludeComponent("bitrix:menu", "horizontal_multilevel_salad", array(
"ROOT_MENU_TYPE" => "top_new",
"MENU_CACHE_TYPE" => "N",
"MENU_CACHE_TIME" => "3600",
"MENU_CACHE_USE_GROUPS" => "Y",
"MENU_CACHE_GET_VARS" => array(
),
"MAX_LEVEL" => "1",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "N",
"ALLOW_MULTI_SELECT" => "N"
),
false
);?>
Проблема:
Если в оба меню проставить шаблон turquoise или salad, то нормально отображается нужный цвет.
Если оставить только одно меню, тоже нормально отображается нужный цвет.
Но если в верхнее проставить turquoise, а в нижнее - salad, то оба меню отображаются цвета salad, то есть того шаблона, который прописан ниже.
При этом, если сохранить веб-страницу полностью, сохраняются оба css-файла: и turquoise, и salad.

Что можете посоветовать, чтобы добиться решения задачи?