Toute la hauteur derrière texte

Bonsoir,

Cela fait une petite heure que je peine à résoudre un problème qui parait simple mais ne l'es pas.
J'ai une bar qui prend toute la longueur de la page en haut de ma page avec 15% de hauteur, un menu sur cette bar et en dessous de la bar un fond bleu. J'aimerai qu'au :hover du texte le background de derrière le texte prenne la couleur du bloc en dessous.

Voici une image pour être plus clair:

http://images.jupload.fr/1401989055.png

Le code CSS:

#bar .onglet a {
    color: #FFF;
    font-size: 25px;
    font-family: 'Ebrima';
    text-shadow: 0px 2px 2px #000;
    text-decoration: none;
    padding-right: 3%;
    padding-left: 3%;
}

#bar .onglet a:hover {
    background-color: #2C3E50;
}

Et le code HTML:

<div style="text-align: right; padding-right: 2%;"><span class="onglet"><a href="#">Recrutement</a></span><span class="onglet"><a href="#">La faction</a></span><span class="onglet"><a href="#">Nous contacter</a></span></div>

Merci d'avance de votre aide, Ben

background: transparent

Ne marche pas..

Bonsoir,

J'avais 2min , à adapter suivant ton besoin
Modifié par 6l20 (06 Jun 2014 - 21:57)