Desabilitar link do menu na página corrente

Desabilitar link do menu na página corrente

Fazer menu com on mouse hover, usando css todo mundo já sabe. Mas uma coisa que sempre me incomodou foi o fato de o link da pagina ativa continuar disponivel para se clicar.
Encontrei uma solução para isso.

Vou descrever aqui somente como desabilitar o link, sem ter que alterar nada no código. O menu em css posso postar dps se alguem interessar


Exemplo de estrutura:
<ul>
       <li class="home"><a href="home.html">Home</a></li>
       <li class="sobre"><a href="sobre.html">Sobre</a></li>
       <li class="clientes"><a href="clientes.html">Clientes</a></li>
       <li class="contato"><a href="contato.html">Contato</a></li>
</ul>

É extremamente simples, basta setar alguns valores, no link da página ativa.
Exemplo para o link de Clientes ficar desalibitado


.clientes a{
pointer-events: none;
cursor: default;}


Testado no Firefox 3.6, Chrome 4.1, Safari 3, Ie7 e Ie8
Fonte: Css-Tricks


PS.: Esse css precisa ser chamado somente na pagina ativa, ou seja, nesse caso de exemplo, somente quando se entrar na página de clientes.

Por questões de organização eu sempre crio um css para formatação geral, que é comum a todas as páginas(geral.css), e um css para cada página (clientes.css, home.css, etc...)
Sendo assim esse código css ficaria na pagina de clientes, que é chamada somente quando entra na página.
Há outra maneira usando id no body. Depois crio um post só falando disso.