Trouble with Active state in navigation bar.

[HarryPot]

I'm trying to get my navbar to have an active state. So far, the hover and click state work perfectly. ButI haven't been able to use the active state.

I started using an Apple template, which is like follows:

Here is the HTML:

<div id="total_nav">
    <div id="nav_header">
		<ul id="nav">
			<li id="n-inicio"><a href="default.html">Inicio</a></li>
			<li id="n-casas"><a href="casas.html">Casas</a></li>
            <li id="n-nosotros"><a href="mision.html">Nosotros</a></li>
            <li id="n-contacto"><a href="contacto.html">Contacto</a></li>
            <li id="n-soporte"><a href="servicios.html">Soporte</a></li>
		</ul>
	</div> 
	<!--nav_header ends-->
    </div> 
    <!--nav_total_nav ends-->

Here is the CSS:

/* Navigation Bar */
#nav_header { width: 600px; height: 35px; margin: 19px auto; position: relative; z-index: 9998; }
#nav_header #nav { margin: 0; padding: 0; }
#nav_header #nav li { display: inline; }
#nav_header #nav li a { float: left; width: 120px; height: 0; padding-top: 38px; overflow: hidden; }
#nav_header #nav li a,
#nav_header #globalsearch { background-image:url(images/nav_bar.png);}

/* BUTTONS */
#nav_header #nav li#n-inicio a { background-position: 0 0; }
#nav_header #nav li#n-casas a { background-position: -120px 0; }
#nav_header #nav li#n-nosotros a { background-position: -240px 0; }
#nav_header #nav li#n-contacto a { background-position: -360px 0; }
#nav_header #nav li#n-soporte a { background-position: -480px 0; }

/* OVER STATES */
#nav_header #nav li#n-inicio a:hover { background-position: 0 -38px; }
#nav_header #nav li#n-casas a:hover { background-position: -120px -38px; }
#nav_header #nav li#n-nosotros a:hover { background-position: -240px -38px; }
#nav_header #nav li#n-contacto a:hover { background-position: -360px -38px; }
#nav_header #nav li#n-soporte a:hover { background-position: -480px -38px; }

/* PRESSED STATES */
#nav_header #nav li#n-inicio a:active { background-position: 0 -76px; }
#nav_header #nav li#n-casas a:active { background-position: -120px -76px; }
#nav_header #nav li#n-nosotros a:active { background-position: -240px -76px; }
#nav_header #nav li#n-contacto a:active { background-position: -360px -76px; }
#nav_header #nav li#n-soporte a:active { background-position: -480px -76px; }

/* ON STATES */
##nav_header #nav li#n-inicio a:active { background-position: 0 -76px; }
#nav_header #nav li#n-casas a:active { background-position: -120px -76px; }
#nav_header #nav li#n-nosotros a:active { background-position: -240px -76px; }
#nav_header #nav li#n-contacto a:active { background-position: -360px -76px; }
#nav_header #nav li#n-soporte a:active { background-position: -480px -76px; }

I gave the Body tag a unique id, but I'm not sure where to put this id in the CSS.

Thanks for any help.