[ryumka]

Есть простое меню.

<div class="main_menu">
    <ul class="catalog_list">
      <li class="qq"><a id="topmenu129" href="/vyzov-zamerschika.html">Вызов замерщика</a></li>
      <li class="qq"><a id="topmenu130" href="/kupon-na-skidku.html">Купон на скидку</a></li>
      <li class="qq"><a id="topmenu131" href="/price.html">Услуги</a></li>
      <li class="qq"><a id="topmenu132" href="/calc.html">Калькулятор</a></li>
      <li class="qq"><a id="topmenu133" href="/#">Видео</a></li>
      <li class="qq"><a id="topmenu134" href="/discount.html">Акция!</a></li>
       </ul>
  </div>

Есть css для этого меню:

.main_menu {
clear: both;
width: 100%;
height: 109px;
}
.catalog_list {
padding: 0;
margin: 0;
}
.catalog_list a {
float: left;
width: 100%;
height: 20px;
font: bold 14px arial;
padding-top: 80px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}

#topmenu129 {
background: url(../i/icon_call.gif) no-repeat 50% 20%;
  color: #FFBE00;
}
#topmenu130 {
background: url(../i/icon_question.gif) no-repeat 50% 20%;
  color: #68A3FF;
}
#topmenu131 {
background: url(../i/dollar.png) no-repeat 50% 20%;
  color: #FFBE00;
}
#topmenu132 {
background: url(../i/accessories-calculator.png) no-repeat 50% 20%;
  color: #68A3FF;
}
#topmenu133 {
background: url(../i/xine.png) no-repeat 50% 20%;
  color: #FFBE00;
}
#topmenu134 {
background: url(../i/icon_discount.gif) no-repeat 50% 20%;
  color: #42B700;
}
.catalog_list li.qq {
  height: 110px;
background: url(../i/menu1.gif) no-repeat left top;
background-size: 100% 110px;
float: left;
list-style-type: none;
text-align: center;
width: 16.6%;
}
#topmenu129:hover, .current #topmenu129 {
background: url(../i/remont_red.png) no-repeat 50% 0;
}
#topmenu130:hover, .current #topmenu130 {
background: url(../i/kupon.png) no-repeat 50% 0;
}
#topmenu131:hover, .current #topmenu131 {
background: url(../i/ceny.png) no-repeat 50% 0;
}
#topmenu132:hover, .current #topmenu132 {
background: url(../i/calc.png) no-repeat 50% 0;
}
#topmenu133:hover, .current #topmenu133 {
background: url(../i/video.png) no-repeat 50% 0;
}
#topmenu134:hover, .current #topmenu134 {
background: url(../i/akciya.png) no-repeat 50% 0;
}
.catalog_list a span{font:bold 14px arial;text-transform: uppercase;}
 .catalog_list a:hover{float:left;color:#ed2225}
 .catalog_list a .red_img{display:none}
 .catalog_list a:hover .red_img{display:inline}
 .catalog_list a:hover .grey_img{display:none}
 .catalog_list li li{background: none repeat scroll 0 0 transparent;float: none;}
.last_img{display:none}

 .catalog_list li.current{
height: 110px;
 
background: url("../i/menu2.gif");

background-position: left top; 
    background-repeat: no-repeat; 
background-size: 100% 110px;
float: left;
list-style-type: none;
text-align: center;
width: 16.6%; 
}
 .catalog_list li.current a{color:#ed2225;}
 .catalog_list li.current .last_img{display:inline}
 .catalog_list li.current .grey_img,.catalog_list li.current .red_img{display:none}
a {
  color:#0072ff;
  font:12px Verdana, Arial, Tahoma, Helvetica;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

И код на jqyery, который производит смену классов у пунктов li

$(document).ready(function(){
  $('.catalog_list li a').each(function () {
    if (this.href== location.href){ 
      $(this).parent().removeClass('qq');
      $(this).parent().addClass('current');
                                   }
    });
});

При этом при нажатии на ссылку меню у каждого li должен меняться класс с qq на current, что и происходит. Однако во всех браузерах при смене класса у li меняется background, а у Хрома картинка просто пропадает. Еще и подтормаживает все это дело.
Подскажите, пожалуйста, как правильно реализовать смену классов, чтобы все работало верно. Есть подозрения, что я вообще подхожу к вопросу не с той стороны...
Спасибо!
P.S. Работу меню можно посмотреть на сайте http://www.oknario.ru