Need to crate class for current li

<div id="top-nav">
   <div class="buttonwrapper">
    <ul>
    <li><a href="index.php" title="Home" class="ovalbutton"><span>Home</span></a></li>
    <li><a href="?page=about" title="About" class="ovalbutton"><span>About</span></a></li>
    <li><a href="?page=services" title="Services" class="ovalbutton"><span>Services</span></a></li>
    <li><a href="?page=events" title="Events" class="ovalbutton"><span>Events</span></a></li>
    <li><a href="?page=fundraising" title="Fundraising" class="ovalbutton"><span>Fundraising</span></a></li>
    <li><a href="?page=leagueoffriends" title="League of Friends" class="ovalbutton"><span>League of Friends</span></a></li>
    <li><a href="?page=contact" title="Contact Us" class="ovalbutton"><span>Contact Us</span></a></li>
    </ul>
</div>
</div>
 
#top-nav {
	float:left;
	width: 720px;
	height: 25px;
	margin-top: 80px;
}
 
/* Buttons */
 
#top-nav ul {
	list-style-type:none;
}
 
#top-nav li {
	display: inline;
	color: #333;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 16px;
}
 
#top-nav li a {
	text-decoration:none;
	margin-left: 10px;
	margin-right: 10px;
	color: #333;
	font-size: 16px;
}
 
#top-nav li a:hover {
	text-decoration:none;
	margin-left: 10px;
	margin-right: 10px;
	color: #BBB;
	font-size: 16px;
}
 
a.ovalbutton{
background: transparent url('images/buttons/oval-blue-left-new.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}
 
a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}
 
a.ovalbutton span{
background: transparent url('images/buttons/oval-blue-right-new.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}
 
a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
 
a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
 
 
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: <a href="http://www.quirksmode.org/css/clearing.html" rel="nofollow">http://www.quirksmode.org/css/clearing.html</a> */
width: 100%;
height: 25px;
}