How to make a button stay down when I click on it in

So I have created a horizontal navigation bar, I use the CSS Sprites/Pixy 
method to get the hover working with the same image as the link/in active
stage 
of the buttons.

 Now how do I make the button stay down when someone click on them?
 These are the codes for the nav bar.


 #nav{
 	width: 780px;
 	list-style: none;
 	margin-top: 0;
 	margin-right: auto;
 	margin-bottom: 0;
 	margin-left: auto;
 	padding: 0;
 	height: 40px;
 	}
  
 #nav li{
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 14px;
 	font-weight: bold;
 	float: left;
 	padding: 0;
  }
  
 #nav a{
 	width: 125px;
 	display: block;
 	color: #000000;
 	text-decoration: none;
 	text-align: center;
 	background-image: url(ZITTO_IMAGES/button_set1a.jpg);
 	background-repeat: no-repeat;
 	background-position: center 2px;
 	padding-top: 14px;
 	padding-bottom: 10px;
 	background-color: #000000;
 	}
 	
 #link2,#link3,#link4,#link5,#link5,#link6 { margin-left: 6px;}


 #nav a:hover{
 	background-image: url(ZITTO_IMAGES/button_set1a.jpg);
 	background-repeat: no-repeat;
 	background-position: center -36px;
 	color: #FFFFFF;
 	width: 125px;
 	padding-top: 14px;
 	padding-bottom: 10px;
 	background-color: #000000;
 }

 Everything works so far, the hover works when you roll the mouse but when
you 
click the button goes right back.
 How can I make it stay down and then go back to normal when you click on 
another link/button?

 Thanks very much.

 Patrick