Cómo lograr el efecto expandir/encoger enlace

[neodani]

Lo he probado cómo dices YYs86 ya que no he consigo hacerlo de la forma que decía IsaBelM, pero claro al pasar por encima de cualquiera de ello me muestra el texto oculto de todos los span, no sobre el que estoy encima, hay alguna forma de diferenciarlo?

Código HTML:

<div class="ordenacion">Ordenar por:<ul>
<li>R<span style="display: none">elevancia</span></li>/<li>R<span style="display: none">aking</span></li>
</ul></div>
 

Código Javascript:

$('.ordenacion').mouseover(function(){
$(this).parent().find('span').show();
}).mouseout(function(){
$(this).parent().find('span').hide();
});
 

Muchas gracias de antemano