How to change the color of the selected menu?

Hello All,

In my menu,one of the menu headings is selected and the heading as well as the items within it are displayed using a different color(by using CSS class) when I first land on the page.How do I change the selected menu when I click on some other menu heading?

The following is my HTML:

<html xmlns="" xml:lang="en" lang="en">


<title>Sample Tab Drop Down Menu Page</title>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" 

sfhover\\\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);

 <style type="text/css">
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;

#nav a {
	display: block;
	width: 10em;

#nav li {
	float: left;
	width: 10em;
#nav li ul {
	position: absolute;
	width: 10em;
           	left: -999em;

#nav li:hover ul {
	left: auto;
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
#nav .selected a
    background-color: red;



<ul id="nav">
	<li class="selected"><a href="#">fish1</a>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>

	<li><a href="#">fish2</a>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>



In the above HTML I need to change the selected class to Fish2 when it is clicked.How can I do that? Any help will be greatly appreciated.