Como dejar activo un boton en paginas HTML(no dinamicas)

[GPOLANCO]

Hola e estado maquetando un diseño que e hecho en photoshop y me encuentro con una dificultad, haber si me pueden ayudar,

tengo esta lista para crear un menú.

Código HTML:

<div id="menu"><!--START DIV ID MENU-->
   <ul>
      <li id="home"><a href="../index.html" title="Home">Home page</a></li>
      <li id="aboutme"><a href="../aboutme.html" title="About me">About me</a></li>
      <li id="services"><a href="../services.html" title="Services">Services</a></li>
      <li id="gallery"><a href="../gallery.html" title="Gallery">Gallery</a></li>
      <li id="contact"><a href="../contact.html" title="Contact me">Contact me</a></li>
    </ul>
  </div><!--END DIV ID MENU--> 

y e agregado el siguiente estilo css para ponerle a cada botón una imagen de fondo y una imagen de fondo para el estado hover.

Código:

#menu ul li{
    display:block;
    width:147px;
    height:47px;
    float:left;}
#menu ul li a{
    display:block;
    width:147px;
    height:47px;
    text-align:center;
    text-indent: -9999px;}
    
#menu li#home{background:url(../images/menu-bg.png) 0px 0px no-repeat; margin-right:12px;}
#menu li#aboutme{background: url(../images/menu-bg.png) -147px 0px no-repeat; margin-right:12px;}
#menu li#services{background:url(../images/menu-bg.png) -294px 0px no-repeat; margin-right:13px;}
#menu li#gallery{background:url(../images/menu-bg.png) -441px 0px no-repeat; margin-right:13px;}
#menu li#contact{background:url(../images/menu-bg.png) -588px 0px no-repeat;}


#menu li#home a:hover{background:url(../images/menu-bg.png) 0px -47px no-repeat; margin-right:12px;}
#menu li#aboutme a:hover{background: url(../images/menu-bg.png) -147px bottom no-repeat; margin-right:12px;}
#menu li#services a:hover{background:url(../images/menu-bg.png) -294px bottom no-repeat; margin-right:13px;}
#menu li#gallery a:hover{background:url(../images/menu-bg.png) -441px bottom no-repeat; margin-right:13px;}
#menu li#contact a:hover{background:url(../images/menu-bg.png) -588px bottom no-repeat;}

Todo me funciona ala perfección hasta aquí, pero quisiera que en cada pagina que entre este activo el botón de la pagina en la que me encuentro.

Es lo que quiero hacer. ¿Como dejo activo el botón de la página en la que me encuentro?

haber si alguien me echa una manita...

[GPOLANCO]

JEJEJ, al parecer no solo yo no se como solucionarlo.

[kokoou]

facil, por ejemplo en index.html

Código HTML:

<div id="menu"><!--START DIV ID MENU-->
   <ul>
      <li id="home" class="activo"><a href="http://www.forosdelweb.com/f53/index.html" title="Home">Home page</a></li>
      <li id="aboutme"><a href="http://www.forosdelweb.com/f53/aboutme.html" title="About me">About me</a></li>
      <li id="services"><a href="http://www.forosdelweb.com/f53/services.html" title="Services">Services</a></li>
      <li id="gallery"><a href="http://www.forosdelweb.com/f53/gallery.html" title="Gallery">Gallery</a></li>
      <li id="contact"><a href="http://www.forosdelweb.com/f53/contact.html" title="Contact me">Contact me</a></li>
    </ul>
  </div><!--END DIV ID MENU-->
 

y te creas una nueva clase llamada "activo" y le pones el estilo que quieras

Código CSS:

.activo { background-color: #F90 }