.sidebar_menu:active not works? Need help

Hi there,
Kindly have a look on below CSS property.
What i want to ask is: when i'll click on a button, it should be look active. I mean it would have to get property of .sidebar_menu:active
But it doen't works.
Please elp me out from this.





<!--Sidebar menu button start-->

.input {
color : #FF9000;
font-size:20px;
;
}

.sidebar_menu{
border: 0px;
background: url('images/word-real.jpg') no-repeat top left;
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
font-family: Verdana, Arial, Helvetica;;
width:97px;
height:42px

}
.sidebar_menu:hover {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;

}

.sidebar_menu:active {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}

br { clear: left; }
<!--Sidebar menu button End-->





<a rel="11"><input type="button" value="worship" class="sidebar_menu"/></a>
<a rel="22"><input type="button" value="prayer" class="sidebar_menu"/></a>
<a rel="33"><input type="button" value="cell" class="sidebar_menu"/></a>
<a rel="44"><input type="button" value="city" class="sidebar_menu"/></a>
<a rel="55"><input type="button" value="mission" class="sidebar_menu"/></a>

 

Your problem is this: you don't know what :active means. It does NOT mean "highlight after clicking". It means "while I'm holding the button down clicking".

What you are looking for is called "highlight current css". Google that and you'll see many sites giving you different methods to get what you want.


That aside, you are using the wrong HTML element. <input>s are for forms, not menus.

You want
<ul id="menu">
<li><a href="worship">Worship</a></li>
<li><a href="prayer">Prayer</a></li>
<li><a href="cell">Cell</a></li>
<li><a href="city">City</a></li>
<li><a href="mission">Mission</a></li>
</ul>

That's what site navigation looks like, with the pages referenced in the href of the a.

If you really meant to use a form, then use a real form.
<form action="some action" method="get">
<fieldset>
<legend>Choose something here</legend>
<label for="worship"><input type="radio" name="choose" id="worship" value="worship" /> Worship</label>
<label for="prayer"><input type="radio" name="choose" id="prayer" value="prayer" /> Prayer</label>
<label for="cell"><input type="radio" name="choose" id="cell" value="cell" /> Cell</label>
...etc
<input type="submit" value="Submit" />
</fieldset>
</form>

etc...

 

What he said.

Although, if you wanted to use jQuery, it would be:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");});
});
</script>