[CSS] Menu con funzionalità "selezionato"

[fabbio86]

Ciao a tutti!

Ho realizzato un menu tramite liste.
Vorrei ora realizzare su uno dei pulsanti la funzionalità "pagina corrente" o "selezionato". Cioè se il link punta alla pagina che è visualizzata, il link non è più attivo e questo fatto viene indicato da una decorazione diversa. Ho provato ma non sono riuscito a ottenere il risultato voluto.

Qualcuno può aiutami?

Grazie!

Ecco il codice che ho utilizzato (il pulsante di contenuto prova dovrebbe essere visualizzato diversamente dagli altri).

XHTML

<div id="navigation">
<ul>
    <li class='selected'>Prova
    [*][url="#"]ciao[/url]
    [*][url="#"]pippo[/url][/list]

CSS

div#navigation {
    font: 80% Arial, Helvetica, sans-serif;
    position: absolute;    
    left: 10px;
    top: 60px;
    width: 280px;
    border: 0px;
}

.selected {
    border: 1px solid #000000;
    display: block;
    background-color: #b0dce8;
    color: #000000;
    margin: 0;
    padding: 0.3em 0.6em 0.3em 1em;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    border-left: 6px solid #EAD100;
}
    
div#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000000;
}
    
div#navigation li, .selected {
    font-size: 1.1em;
    display: inline;
    margin: 0;
    padding: 0;
}
    
div#navigation a:link, div#navigation a:visited {
    display: block;
    background-color: #b0dce8;
    color: #000000;
    margin: 0;
    padding: 0.3em 0.6em 0.3em 1em;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    border-left: 6px solid #0066ff;
}

div#navigation a:hover, div#navigation a:focus, div#navigation a:active{
    background-color: #0066ff;
    color: #FFFFFF;
    border-left: 6px solid #EAD100;
}