I have a jQuery menu that isn't working like it should when you click the back button. There is a class of "selected" in html for the link of the page that you are currently on. jQuery removes the class and adds the class "hovering" when you hover over other links. The problem is that when you click the back button the class of "selected" remains on the link you just visited instead of for the link of the page you are actually on. I am a newbie but I am assuming that the html is overwritten.

So far I've tested it only on FF, IE and Chrome. This problem is only encountered on FF. I was wondering if there is a way in to revert back to the original CSS class in the html. The menu can be tested here.

Here is the html:

HTML Code:
<div id="menu">


<li id="menuitem0" class="selected"><a href="index.html">HOME</a></li>
<li id="menuitem1"><a href="link1.html">Link1</a></li>
<li id="menuitem2"><a href="link2.html">Link2</a></li>
<li id="menuitem3"><a href="link3.html">Link3</a></li>
<li id="menuitem4"><a href="link4.html">Link4</a></li>
<li id="menuitem5"><a href="link5.html">Link5</a></li>
<li id="menuitem6"><a href="link6.html">Link6</a></li>


Here is the jQuery code:

jQuery(document).ready(function($) {
      var pathmatch = location.pathname.match(/([^\/]+)$/);
      // set selected by the current pathname, or default to Home...
      if( !pathmatch || !$('#menu a[href$="' + pathmatch[1] + '"]').addClass('selected').length){
        $('#menu a').eq(0).addClass('selected');
      $('#menu a')
          // add (or remove) 'hovering' class to the parent LI and its parent UL...