Couleur d'un lien au "hover" avec 2 span

Bonjour,

J'ai mis en place des boutons avec textes sur 2 lignes. J'ai encadré chaque ligne d'un <span> afin de pouvoir leur appliquer 2 styles (1 style pour la ligne "Lorem", et 1 style pour la ligne "Ipsum"). Je souhaiterais maintenant que la typo des 2 lignes passe au blanc lors du survol, quelque soit la zone du bloc <a> survolé. Je n'ai pas réussi à mettre cela en place.

Mon HTML :

<nav>
    <h2>Sommaire</h2>
    <ul>
        <li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
        <li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
        <li><a href="#"><span>Lorem</span><span>Ipsum</span></a></li>
    </ul>
</nav>

Mon CSS :

nav {
    width: 260px;
}

nav a {
    display: block;
    padding: 13px 15px;
}

nav span {
    display: block
}

nav span:first-child {
    color: #333333;
}

nav span+span {
    font: 0.875em 'open_sansitalic', arial, sans-serif;
    color: #666666;
}

nav a:hover {
    color: #ffffff;
    background-color: #c0392b;
}

Ma déclaration "color" de mon selecteur "nav a:hover" n'est pas prise en compte...
Quelqu'un aurait-t-il une piste ?
Merci d'avance pour votre aide.