Efecto rollover en un span

[kambiz_marta]

Buenas, soy bastante novatilla en css y quizás me estoy liando y quiero hacer lo que no se puede.
Me explico. Tengo una lista con las siguientes opciones:
- Quien
- Qué
- Como
Y quisiera que en el mouseover de cada opción apareciera más texto, es decir:
- Quien somos
- Qué ofrecemos
- Como encontrarnos

Lo he montado de la siguiente manera. Lo que me hace falta es que aparecezcan el texto adicional en el mouseover

Código HTML:

<div id=header>
             <ul id=navlist>
                <li><a href="#">QUIEN <span>somos</span</a></li>
                <li><a href="#">QUE; <span>ofrecemos</span></a><li>
                <li><a href="#">COMO <span>encontrarnos</span></a></li>
              </ul>
      </div>
 

Y en estilos lo siguiente:

Código CSS:

#navlist li a:hover {
    color: #FFF;                    background-color: #0099CC;
    visibility: visible;
}
 
#navlist li a span {
    font-family: "Bradley Hand ITC";
    font-size: 24px;
    visibility: hidden;
}
 

Me falta encontrar la manera de indicar el efecto mouseover del span.
Gracias por vuestra ayuda