No realiza una autentica expansión, sino que utiliza el "exagerado" ancho de la imagen para hacer ver que se expande. Mientras el elemento
<li> muestra la parte izquierda de la imagen, el
<span> muestra la derecha. Es un truco visual muy usado por ejemplo para crear bloques redondeados expandibles.
Y si alguien pregunta cómo lo hace para cambiar el color... fijaos que el interior de la imágen es transparente, así que no hay más que asignar un color de fondo al elemento
