jquery - jQueryトグルナビゲーションCSSスタイリング

Question

ページのセカンダリ ナビゲーションとして jQuery トグル ナビゲーション メニューがあります。

最上位のナビゲーションにアクティブな「状態」を追加したいと考えています。現在、「ホバー」状態のみがあります..アクティブな「状態」は、「スプライト画像」から別の色を表示する必要があります..

http://awesomescreenshot.com/07c1w39kc1

私は使用しようとしました：

.title1 {
padding-left:15px;
height:17px;
background: url(images/arrow-toggle.png) 0 3px no-repeat !important;
cursor:pointer;
margin-bottom:3px;
color:#168716;

}
.title1 a p:hover, .on a p { 
    background:url(images/bg_subNaviArrow.jpg);
    background-position:-20px -208px;
    margin-left: -16px; 
    padding-left: 16px; 
}

.title1 p {
   color: #000;
   max-width: 167px; 
   font-size: 12px;
   padding: 1px 3px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;
}

.on {
background: url(images/arrow-toggle.png) 0 0px no-repeat !important;
}

これがjQueryコードです。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.title1').click(function() {    

        $('.title1').removeClass('on');    
        $('.content2').slideUp('normal'); 

        if($(this).next().is(':hidden') == true) {    
            $(this).addClass('on');    
            $(this).next().slideDown('normal');
        }

    });

});
</script>

テストページへの URL http://planeta.se/nordcharkLast/recept-2/