Имеется такое меню такого типа
<ul>
<li class="menu"><a href="/index.php/katalog/laminat">Ламинат</a></li>
<li class="menu"><a href="/index.php/katalog/santekhnika/vanni">Ванны</a></li>
<li class="menu"><a href="/index.php/katalog/santekhnika/smesiteli">Смесители</a></li>
<li class="menu"><a href="/index.php/katalog/santekhnika/unitazy">Унитазы</a></li>
<li class="menu"><a href="/index.php/katalog/santekhnika/mebel-dlya-vannoj">Мебель</a></li>
<li class="menu"><a href="/index.php/katalog/teplyj-pol">Теплый пол</a></li>
<li class="menu"><a href="/index.php/katalog/dekorativnye-paneli">Декор панели</a></li>
</ul>
<style>
.active{
color:#f00;
}
</style>
и js
$('document').ready(function() {
$('.menu a').each(function() {
if ('http://www.mysite.ru'+$(this).attr('href') == window.location.href)
{
$(this).addClass('active');
}
});
});
Все хорошо работает, НО если мы переходим глубже, к примеру в
/index.php/katalog/laminat/002-dub-vaddenze
подсветка пункта "Ламинат" пропадает. Как изменить js что бы подсветка не пропадала?