menu horizontal

[subirol]

Hola a tod@s de nuevo, estoy haciendo un menú similar al de la web: http://cssvault.com/gallery/ , pero no me funciona del todo, cuando entro en una de las secciones de la página el botón no me mantiene la configuración de activo y pasa a estado normal, no se si me falta algo dejo el codigo haber si me podeis echar una mano.

Código:

#header { width:644px; margin-top: 2px; height:29px; border-bottom:1px solid #F60; }


#header em { display: none}
#header ul { width: 100%; float: left; padding: 0px; margin: 0px; list-style-type: none;}
#header li { float: left; padding: 0px; margin: 0px; display: inline}
#header li a { DISPLAY: block; HEIGHT: 30px }

#header li a.empresa { background: url(gfx/01.png) no-repeat left top; WIDTH: 120px }
#header li a.empresaActive { background: url(gfx/01.png) no-repeat left bottom; WIDTH: 120px }
#header li a.servicios { background: url(gfx/02.png) no-repeat left top; WIDTH: 120px}
#header li a.serviciosActive { background: url(gfx/02.png) no-repeat left bottom; WIDTH: 120px}
#header li a.tiendas { background: url(gfx/03.png) no-repeat left top; WIDTH: 120px}
#header li a.tiendasActive { background: url(gfx/03.png) no-repeat left bottom; WIDTH: 120px}
#header li a.contacto { background: url(gfx/04.png) no-repeat left top; WIDTH: 120px}
#header li a.contactoActive { background: url(gfx/04.png) no-repeat left bottom; WIDTH: 120px }

#header li a:hover { background-position: left bottom 
}

Código HTML:

 <div id="header">
            <ul>
                <li><a class="empresa" href="/"><em>empresa</em></a></li>
                <li><a class="servicios" href="servicios.htm"><em>servicios</em></a></li>
                <li><a class="tiendas" href="tiendas.htm" title="puntos de venta de Blucom"><em>tiendas</em></a></li>
                <li><a class="contacto" href="contacto.htm"><em>contacto</em></a></li>
            </ul>
        </div>