probleme CSS sur menu

by LorenzoFR

HTML

<div class="blocmenu">
    <ul>
        <li><span class="titremenu">Statuettes</span>

            <ul>
                <li><span class="titremenu">Bois</span>

                    <ul>
                        <li><a href="#ancienne">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
                <li><span class="titremenu">Ceramique</span>

                    <ul>
                        <li><a href="#ancienne" class="pageactive">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.blocmenu {
    width: 250px;
    border: 1px dashed #C0C0C0;
    font: 100% arial;
}
.blocmenu UL {
    padding-left: 20px;
    list-style: none;
}
.blocmenu > UL {
    padding-left: 0px;
}
.titremenu {
    font: bold 110% arial;
    color: #D3E4BA;
    cursor: pointer;
    border: 1px outset gray;
    background-color: #415621;
    padding: 5px;
    margin-top: 5px;
    display: block;
}
.blocmenu LI A {
    font-size: 80%;
    margin-top: 6px;
    display: block;
    color: #415621;
    
    background-color: #D3E4BA;
    border: 1px inset gray;
}
/* 
"pageactive:after" fonctionne
mais le style "border" de "pageactive" ne fonctionne pas !???
surement un ordre d'heritage CSS

fonctionne quand je vire le style "border" sur .blocmenu LI A
*/
 .pageactive {
    border: 2px outset gray;
    background-color: red;
}
.pageactive:after {
    content:" : LIEN ACTIF !!!!";
    margin-left: 10px;
    border: 1px solid red;
}