[Ayuda]Menu

Hola gente antes que todo les pido disculpas si esto no va posteado aca, dado que soy novato y estoy empezando a hacer paginas web como veran me encuentro con un problema al crear un menu.
Mi problema es el siguiente.. yo quiero que cuando uno haga click en "x" seccion de mi menu quede marcada con una imagen que tengo. le muestro el codigo como lo tengo


// CODIGO HTML DE MI MENU //


<div id="ja-mainnav">
<div id="ja-splitmenu" class="mainlevel clearfix">
<ul>
<li class="active"><span class="menu-title">Inicio</span>

<span class="menu-title">Registro</span>

<span class="menu-title">Descargas</span>

<span class="menu-title">Rankings</span>

<span class="menu-title">Castle Sige</span>

<span class="menu-title">Foro</span>

</div>
</div>


//CODIGO CS DE MI MENU //

#ja-splitmenu {
margin: 0;
padding: 8px 0 0 15px;
position: relative;
background: url(../img/menu/mainnav-sep.gif) no-repeat 5px 18px;
background-image: url(../img/menu/mainnav-sep.gif);
}

#ja-splitmenu ul {
margin: 0;
padding: 0;
}

#ja-splitmenu li {
float: left;
padding: 0 20px 0 0;
margin: 0 2px;
background: url(../img/menu/mainnav-sep.gif) no-repeat right 10px;
}

#ja-splitmenu a {
display: block;
float: left;
text-decoration: none;
font-weight: bold;
color: #999999;
padding: 0 0 0 15px;
height: 26px;
line-height: 26px;
text-transform: uppercase;
font-size: 92%;
}

#ja-splitmenu a span {
display: block;
float: left;
padding: 0 15px 0 0;
height: 26px;
line-height: 26px;
}

#ja-splitmenu a:hover,
#ja-splitmenu a:active,
#ja-splitmenu a:focus {
background: url(../img/menu/mainnav-hover.gif) repeat-x left center #333333;
color: #FFFFFF;
}

#ja-splitmenu a:hover span,
#ja-splitmenu a:active span,
#ja-splitmenu a:focus span {
background: url(../img/menu/mainnav-hover.gif) repeat-x right center #333333;
cursor: pointer;
}

#ja-splitmenu li.active a,
#ja-splitmenu li.active a:hover,
#ja-splitmenu li.active a:active,
#ja-splitmenu li.active a:focus {
background: url(../img/menu/mainnav-active.gif) no-repeat left center #FFCC00;
color: #333333;
}

#ja-splitmenu li.active a span,
#ja-splitmenu li.active a:hover span,
#ja-splitmenu li.active a:active span,
#ja-splitmenu li.active a:focus span {
background: url(../img/menu/mainnav-active.gif) no-repeat right center #FFCC00;
cursor: pointer;
}




*Como veran tengo "<li class="active"><span class="menu-title">Inicio</span>" y al ver mi web se ve el inicio con la imagen que yo quiero, pero al cambiar de seccion queda la imagen de inicio marcada T_T. Por favor ayuden a este novato T_T.


Att.- None ;)

Como lo tienes creo que lo tienes bien, no miré el código entero, solo lo ojeé :)

Lo que tienes que hacer es poner la class active donde corresponda. Por ejemplo si tienes un menú con Inicio Noticias y Contacto tendrías tres páginas .html

En la primera, index.html, la class active se la pones al li de Inicio, en noticias.html se la pones al li de Noticias y así seguido.

Saludos ;)