Problema con efecto subrayado en header

[fede5426]

Con CSS la única forma es agregarle la clase al menu activo de cada pagina que hagas, siempre y cuando tengas un archivo para cada sección, index.html, contacto.html, etc.

Con JQuery, una de las formas más fáciles, es esta:

Código HTML:

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>
 

Código CSS:

a{
  text-decoration:none;
}
 
.active{
  text-decoration:underline;
}
 

Código Javascript:

$("a").click(function(){
    $("a").removeClass("active"); //Quitamos la clase "active" a todos los enlaces
    $(this).addClass("active"); //Agregamos la clase "active" al enlace clickeado
});
 

Obviamente para que esto no pase en TODOS los enlaces, es conveniente poner una clase extra a los enlaces, por ejemplo "menu" (para solo identificar esos enlaces) y el código te quedaria asi:

Código HTML:

<ul>
  <li><a href="#" class="menu">item 1</a></li>
  <li><a href="#" class="menu">item 2</a></li>
  <li><a href="#" class="menu">item 3</a></li>
  <li><a href="#" class="menu">item 4</a></li>
</ul>
 

Código CSS:

a{
  text-decoration:none;
}
 
.active{
  text-decoration:underline;
}
 

Código Javascript:

$("a.menu").click(function(){
    $("a.menu").removeClass("active"); 
    $(this).addClass("active"); 
});
 

Ejemplo: http://codepen.io/anon/pen/gpOgxO

Saludos