menu button

[zeeshan_kust]

i have a menu button same as this forum menu button i.e
Editorial | Hardware & software | software Development

when you move mouse over any button it change the color to blue or may be change image and and an arrow underneath is appear till that time when you click another button.

my problem is that i got the image replacement using css when i move mouse over menu button it changes its image but on mouseout it backs to original image. what i want to do is that it should remains untill the user click another button.
i.e (see the forum menu button)

my code is

#menu
{
width: 628px;
height: 69px;
padding-left: 380px;

}

#menu ul {
	list-style: none;
}

#menu li {

	display: inline;
}

#menu a {
	float: left;
	width: 107px;
	height: 28px;
        display: block;
	

}

#menu a:hover {
	width: 107px;
        height: 28px;



}

#emailUs
  {
    display: block;
    width: 107px;
    height: 28px;
    background: url("../images/add_1.png") no-repeat 0 0;

  }

  #emailUs:hover
  {
    background: url("../images/add_h.jpg") no-repeat 0 0;
  }

and the html code is

<div id="menu" style="position: absolute; top: 207px; right: 47px;">
		<ul>
			<li><a id="emailUs" href="addrecipe.php"  title=""></a></li></ul></div></div>

[Arkinder]

They're most likely using the pseudo-class active, and changing it for each page.

a:active {
/*code for loaded page*/
}

This is changed for each link as a different page is loaded, causing the corresponding link to the page you're on to be active. I don't think that there is pure HTML/CSS solution for what you're wanting.

Regards, Arkinder