Make a menu tab active when using templates

Question

Could anyone tell me how de we achieve making a menu tab active when using a template and a combination of html & php. I am putting the code I am using for my menu and do not see how to do this and how to relate inner pages to the right menu tab ... The site has hundreds of pages so i hope there is an easy way to do this without having to create duplicated templates. Many thanks.
      <li><span class="divider divider-vert" ></span></li>
      <li><a href="Hostels.html">Hostels Brasil</a></li>
      <li><a href="Historico.html">Historico e Filosofia</a></li>
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="Brasil-Carteira.html">Carteira HI Brasil</a>
         </li>
      <li><span class="divider divider-vert" ></span></li>
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="hostels-mondo/index.html">Hostels do Mundo</a>
</li><li><a class="item-primary" href="Contato.html">Contato</a>
        </li></ul>

Answer 1

Humm .. really not sure what I'm doing wrong here .... I've been redesigning the whole menu but cannot get that to work , if you dont mind I am sending you the code here first so you can already have a look and see if there is some obvious mistake , I am still testing all this on my local machineand as I completly re made the menu for the purpose I cannot upload the files and let the client see a menu like this  (now I was also wondering if maybe this would only work on a live server ?)
So my menu is like this
<div id="nav-container"><div id="nav">
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="../viagem-brasil/destinos.html">Destinos</a></li>
      <li><a href="#">menu</a></li>
    </ul>
  </div>
</div>
Then just befor the </body> tag I have the following :
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryDOMUtils .js"></script>
<script>
       function InitPage(){
        Spry.$$('nav li').forEach(function(node){
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){
            Spry.Utils.addClassName(node,"activeMenuItem");
    Spry.Utils.addLoadListener(InitPage);
    </script>
And my css is, you will notice I am trying to get an image as background but this is only a detail .....
#nav{
    margin: auto;
    color: #FFF;
    height: 65px;
    width: 1060px;
    text-align: left;
    background-image: url(../images/menubg.gif);
#nav-container
    height:65px;
    background-image:url(../images/menubg.gif);
    width: 100%;
#nav-container ul {
padding:0;
margin:0;
list-style-type:none;
#nav-container li {
    margin-left:2px;
    float:left;
    height: 55px;
    /* [disabled]padding-top: 25px; */
#nav-container ul li a {
    display:block;
    float:left;
    width:100px;
    /* [disabled]background-color:#6495ED; */
    color:#FFF;
    text-decoration:none;
    text-align:center;
    padding:5px;
    /* [disabled]margin-top: 20px; */
    height: 25px;
    padding-top: 30px;
#nav-container ul li a:hover {
    background-image: url(../images/menuHome.png);
    display:block;
    float:left;
    width:100px;
    /* [disabled]background-color:#6495ED; */
    color:#FFF;
    text-decoration:none;
    text-align:center;
    padding:5px;
    /* [disabled]margin-top: 20px; */
    height: 25px;
    padding-top: 30px;
.activeMenuItem a {
        background:#a59a84;
        color:#000;
.activeMenuItem a {
    background:#a59a84;
    color:#ffffff;
    background-image: url(../images/menuHome.png);
I really thank you for your time and hope you'll spot the mistake, if not I will do upload something so we can see it live !
Many thanks