Im making a nav menu for my Wordpress page. I made it with PNG sprite and with some jquery hover effects.

I deliberately made the menu with PNG sprites, because the menu is static, no new categories will be added to it so I figured I'll do it with png.

What I want to do is to make the menu item stay in the hover state after the click - that way the user can see on what part of the website he currently is.

<ul id="navigation">  
    <li ><a class="aa" href="test1.html"></a></li>  
    <li ><a class="bb" href="test2.html"></a></li>  
    <li ><a class="cc" href="test3.html"></a></li>  
    <li ><a class="dd" href="test4.html"></a></li>  
    <li ><a class="ee" href="test5.html"></a></li> 
    <li ><a class="ff" href="test6.html"></a></li>
    <li ><a class="gg" href="test7.html"></a></li> 
</ul>

#navigation li a { background-image:url(menu-a.png); display:block; }   

.aa { background-position: 0px 0; height: 38px; width: 108px; margin-left: 16px; }
.bb { background-position: -108px 0; height: 38px; width: 110px; }
.cc { background-position: -218px 0; height: 38px; width: 116px; }
.dd { background-position: -334px 0; height: 38px; width: 158px;}
.ee { background-position: -492px 0; height: 38px; width: 104px; }
.ff { background-position: -595px 0; height: 38px; width: 141px;}
.gg { background-position: -736px 0; height: 38px; width: 78px; }

#navigation a .hover { background:url(menu-a.png) no-repeat; display: block; opacity: 0; position: relative; top: 0px; left: 0;  height: 100%; width: 100%; }  
      
#navigation a.aa .hover { background-position:0px -38px; width:108px; height:38px; }
#navigation a.bb .hover { background-position:-108px -38px; width:110px; height:38px; }
#navigation a.cc .hover { background-position:-218px -38px; width:116px; height:38px; }
#navigation a.dd .hover { background-position:-334px -38px; width:158px; height:38px; }
#navigation a.ee .hover { background-position:-492px -38px; width:104px; height:38px; }
#navigation a.ff .hover { background-position:-595px -38px; width:141px; height:38px; }
#navigation a.gg .hover { background-position:-736px -38px; width:78px; height:38px; }

This is as far as I've got. The menu works, hovers correctly etc. But how do I make the hover effect for "aa" stay active when the visitor lands on test1.html page, "bb" for test2.html etc.?

Thanks!