Problème CSS.

Bonjour,
J'ai un problème avec mon script css.
Je m'explique :
Je souhaite faire des sortes d'étiquettes en guise de lien, et avec css hover augmenter la hauteur de ces étiquettes au passage du curseur.
Ca marche, mais le problème est que quand le curseur passe sur une étiquette, l'autre déscend.
Mais seulement celle de droite, quand je passe mon curseur sur celle de droite, celle de gauche ne descend pas.
Voici les codes en questions :
Pour les étiquette (dans la même div que le logo du header) :

<div id="header">
<a href="/home.php" id="headerlogo"></a>
<div id="etiquette"><a href="/home.php" id="etiquette1"><p align="center">Acceuil</p></a>
<a href="/articles.php" id="etiquette2"><p align="center">Articles</p></a>
</div>
</div>

Et le css :

#header {
background: url(/img/header.png);
height: 180px;
margin: -8px;
}

a#headerlogo {
display:block;
margin-left: 8px;
padding-top: 80px;
background: url(/img/logo.png) no-repeat;
height: 86px;
width: 408px;
padding-top: 0px;
}

a#headerlogo:hover {
display:block;
margin-left: 8px;
background: url(/img/logog.png) no-repeat;
height: 86px;
width: 408px;
}

p.headerp {
font-family: "Sketch";
}

a#etiquette1{
display:block;
width: 100px;
height: 75px;
margin-left: 700px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: red;
font-family: 'Sketch';
color: black;

}

a#etiquette1:visited{
color: black;
}

a#etiquette1:active{
color: blue;
}

a#etiquette1:focus{
color: blue;
}

a#etiquette1:hover{
height: 90px;
color: white;
}

a#etiquette2{
display: block;
width: 100px;
height: 75px;
margin-top: -91px;
margin-left: 810px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: blue;
font-family: 'Sketch';
color: black;

}

a#etiquette2:visited{
color: black;
}

a#etiquette2:active{
color: blue;
}

a#etiquette2:focus{
color: blue;
}

a#etiquette2:hover{
height: 90px;
color: white;
} 

Je ne vois pas où est le problème.
Voilà, merci d'avance. :)