I have a working php menu file that I've included in all my pages, all works fine but the buttons won't stay on over state when selected.

I imagine that some javascript may be the solution but I don't know where to start.....or I could be wrong and there is an easy solution.

Code:
<div class="training_menu">
<ul id="navtraining">
  <li id="btn1"><a href="#">Home</a> </li>
  <li id="btn1"><a href="#" >OneNote</a> </li>
  <li id="btn1"><a href="#" >Photo Story</a> </li>
  <li id="btn1"><a href="#">PDF Creator</a> </li>
  <li id="btn1"><a href="#" >Realplayer</a> </li>
  <li id="btn1"><a href="#" >GoBinder</a> </li>
  <li id="btn1"><a href="#" >Links</a> </li>
</ul>
</div>
Code:
#navtraining{
	_margin-left:40px;
}

#btn1 a{
	display: block;
	color:#666666;
	padding-left:15px;
	padding-right:15px;
	margin-left: 1px;
	margin-right: 1px;
	padding-top:4px;
	padding-bottom:6px;
	font-weight: bold;
	text-align:center;
	text-decoration:none;
	background:url(navigation/tabs/slice.gif) repeat-x #B7B8B9;
	float: left;
	
	
	
	
}

#btn1 a:hover{
	background:#fffFFF;
	margin-left: 1px;
	margin-right: 1px;
	font-weight: bold;
	color:#0E1317;
	
}
#btn1 a:active{
	background:#fffFFF;
	margin-left: 1px;
	margin-right: 1px;
	font-weight: bold;
	color:#0E1317;
	
}