como remover um sublinhado indesejado em css veja:

galera eu to fazendo um menu ocorreu quase tudo certinho menos um sublinhado que apareceu, como retirar ele? eu coloquei "text-decoration: none" e não funciono por favor alguém analiza ai, veja a imagem:

ele aparece tipo um traço entre as palavras no inicio foi azul depois que cliquei fico roxo então deve ser do link.

/applications/core/interface/imageproxy/imageproxy.php?img=http://i49.tinypic.com/14smd5u.jpg&key=a690e31cb07aa32189e9e6231ff3dcb175451320afdcdc6e7d381fb2d9d7054f" alt="14smd5u.jpg" />

veja o código:

html:

>

<div id="menu">
 <ul>
 <li><a href="#">TECNOLOGIA</li>
 <li><a href="#">GAMES</li>
 <li><a href="#">CIÊNCIA</li>
 <li><a href="#">CURIOSIDADES</li>
 <li><a href="#">CINEMA</li>
 </ul>
</div>

CSS

>

#menu ul {

padding: 10px;
margin: 0px;
float: right;
width: 450px;
list-style:none;
font:90% Tahoma;
padding-top: 25px;
}

#menu ul li {

display: inline;
color: #CCCCCC;
margin: 5px;
}

#menu ul li a {

color: #22B573;
text-decoration: none;
}

#menu ul li a:hover {

background-color:#2A2A2A;
color: #22B573;
text-decoration: none;
}

#menu ul li a:link, a:visited, a:active {
text-decoration: none !important;