Des styles spécifiques à la page en cours dans un menu

Bonjour,

Comme beaucoup de tout débutant, j'ai utilisé le tuto alsacreation. http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

Mais je ne suis pas parvenu au bon résultat

Mon site est statique et utilise uniquement la fonction include.

Dans mon fichier include "na_fr.php" (exemple de pages "Notre approche" et "Contact":

<ul id="headerNav">    
    <li<?php if ($nav_en_cours == 'rub1') {echo ' id="en-cours"';} ?>><a href="notre-approche.php">Notre Approche</a></li>
    <li<?php if ($nav_en_cours == 'rub2') {echo ' id="en-cours"';} ?>><a href="contact.php">Contact</a></li>
     </ul>

Dans ma page "Notre apporche" :

<?php $nav_en_cours = 'rub1'; ?>

Dans le css :

#headerNav {
   width: 100%;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size: 13px;
   color: #1A262F;
   text-align: center;
   background-image: url(img/degBarnav.png);
   background-repeat: repeat-x;
   height: 58px;
   float: left;
   margin-bottom: 30px;
   padding-top: 18px;
}
#headerNav ul {
   list-style-type: none;
}
#headerNav li {
   display: inline;
   margin-left: 5px;
   margin-right: 10px;
   background-image: url(img/pucBarnav.png);
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 30px;
}
#headerNav a {
   color: #1A262F;
   text-decoration : none;
}
#headerNav a:hover, #headerNav a:focus {
   color: #0E92BC;
   text-decoration : none;
}
#headerNav #en_cours a {
   color: #0E92BC;
   text-decoration : none;
   background-color: #F33;
}

Bien entendu, je me suis planté quelque part mais ou ?