Joomla 1.5 Не работает подсветка активного пункта меню!

Помогите, пожалуйста. Использую шаблон JJ Rational Magic. Кэширование выключено. Проблема в том, что активный пункт в горизонтальном меню не выделяется. Точнее, выделяется только первый пункт меню, остальные - нет.
Вот кусок кода, где нажат первый пункт меню ("Главная"). К классу пункта меню добавляется "-active":

Код (CODE):

1. <div id="jjNav">
2. <ul id="jjSplit" class="cfix">
3. <div id="jjSplitmm">
4. <ul id="jjSplit" class="cfix">
5. <li id="" class="jjNav-first-active">
6. <a class="active" href="/Photo-kharkiv/">
7. <span>Главная</span>
8. </a>
9. </li>
10. <li class="jjNav">
11. <a href="/Photo-kharkiv/ob-jetom-sajte">
12. <span>Об этом сайте</span>
13. </a>
14. </li>
15. <li class="jjNav-last">
16. <a href="/Photo-kharkiv/stranica-avtora">
17. <span>Страница автора</span>
18. </a>
19. </li>
20. </ul>
21. </div>
22. </ul>

Когда нажаты другие пункты (например, "Об этом сайте"), ничего не происходит

Код (CODE):

1. <div id="jjNav">
2. <ul id="jjSplit" class="cfix">
3. <div id="jjSplitmm">
4. <ul id="jjSplit" class="cfix">
5. <li class="jjNav-first">
6. <a href="/Photo-kharkiv/">
7. <span>Главная</span>
8. </a>
9. </li>
10. <li class="jjNav" id="">
11. <a href="/Photo-kharkiv/ob-jetom-sajte">
12. <span>Об этом сайте</span>
13. </a>
14. </li>
15. <li class="jjNav-last">
16. <a href="/Photo-kharkiv/stranica-avtora">
17. <span>Страница автора</span>
18. </a>
19. </li>
20. </ul>
21. </div>
22. </ul>

СSS:

Код (CODE):

1. ul#jjSplit  li#sfhover,
2. ul#jjSplit  li.jjNav-child-active,
3. ul#jjSplit  li.jjNav-last-child-active,
4. ul#jjSplit  li.jjNav-first-child-active,
5. ul#jjSplit  li.jjNav-first-active,
6. ul#jjSplit  li.jjNav-last-active,
7. ul#jjSplit  li.jjNav-active{
8.     background: transparent url(../images/menu-top-right.png) right top no-repeat;
9.     line-height: 42px;
10.     height: 42px;
11. }

Подскажие, что делать?

 

JS тебе тут нужно.

Вот пример, можешь заменить айди, классы и т.д своими

Вставляешь после </head>

Код (html):

1. <script type="text/javascript" src="/js/jquery.sliding-menu.js"></script>  
2.   <script type="text/javascript">  
3.   jQuery(function(){  
4.   jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();  
5.   });  
6.   </script>  
7.   <style>  
8.   body {  
9.   font-family: "Arial","Verdana","Helvetica";  
10.   font-size: 0.9em;  
11.   margin: 1.5em;  
12.   }  
13.   ul.SlidingMenu {  
14.   list-style: none;  
15.   padding: 0em;  
16.   }  
17.   ul.SlidingMenu a {  
18.   padding: 0.62em 1.5em;  
19.   text-decoration: none;  
20.   color: #FFF;  
21.   outline: none;  
22.   }  
23.   ul.Horizontal li {  
24.   float: left;  
25.   }  
26.   .ClearFix {  
27.   clear: both;  
28.   }  
29.   #HorizontalSlidingMenu {  
30.   background: url('/images/menubg.png') top left repeat-x;  
31.   }  
32.   #HorizontalSlidingMenu li.Background {  
33.   background: url('/images/bg_menu_right.png') top right no-repeat;  
34.   }  
35.   #HorizontalSlidingMenu li.Background div{  
36.   background: url('/images/bg_menu.png') top left no-repeat;  
37.   height: 100%;  
38.   margin-right: 31px;  
39.   }  
40.   </style>

А это лепишь туда где будет само меню

Код (html):

1. <div id="HorizontalSlidingMenu">  
2.   <ul class="SlidingMenu Horizontal">  
3.   <li><a href="Ссылка на страницу">Первый пункт</a></li>  
4.   <li><a href="Ссылка на страницу">Второй пункт</a></li>  
5.   <li><a href="Ссылка на страницу">Третий пункт</a></li>  
6.   <li><a href="Ссылка на страницу">Четвёртый пункт</a></li>  
7.   <li><a href="Ссылка на страницу">Пятый пункть</a></li>  
8.   </ul>  
9.   <div class="ClearFix"></div>  
10.   </div>

Полностью рабочий код