css active feature not working - asp.net

Question

I have the menu bar below and i would like to change the css class to active of the html code when the pages has been selected. So when the user has selected to view said page i would like to set the active class which is already set
HTML Code
<div id="main-nav">
<ul>
<li class="active">Home</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="clear-both"> </div>
</div>
CSS code
#main-nav{
height:29px;
float:left;
background-image:url(../Styles/images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(../Styles/images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(../Styles/images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li.active a,
#main-nav li a:hover{
background-image:url(../Styles/images/active.gif);
background-repeat:no-repeat;
background-position:left;
}

Answer 1

The key to making list-based menus:
DO NOT STYLE THE LIST (other than display, position and float and clearing margins and padding)
Use display:block and put ALL STYLING on the A-tag (this includes your hover and active states).
Also, choose display:inline-block, or float:left, not both.