Keep menu active?!?

I’m trying to get this to work… I have a menu which has a submenu which is activated on mouse over with javascript and that part works just fine, but… I want to be able to have the submenu showned if the mainmenu is clicked… So if, as in example below, the page home is selected, the submenu is activated untill trhe mouse is hoovering over the “Cars” link, and when the mouse goes off the Cars link again the home submenu is activated…

Hope this makes sense… Example below:

<script>
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul class="navbar">
	<li><a href="index.php?page=home">Home</a>
    	<ul class="sub">
        	<li><a href="index.php?page=account">Account</a></li>
            <li><a href="index.php?page=profile">Profile</a></li>
        </ul>
    </li>
    <li><a href="index.php?page=cars">Cars</a>
    	<ul class="sub">
        	<li><a href="index.php?page=smallcars">Small Cars</a></li>
            <li><a href="index.php?page=bigcars">Big Cars</a></li>
        </ul>
    </li>
</ul>

Hope this makes sense… Any help is appreciated…