Barre de menu CSS

Bonjour,

Je fais un site web avec une barre de menu (rien de plus classique). Je fait un peu de css et
donc j'ai definit des div et notament 1 pour la barre de menu.

Ensuite je definit une classe pour les li et a pour faire mon menu sur une ligne dans la barre
du menu. Mon probleme c'est que les element des Li ne sont pas positionner sur la ligne.
Si je trace une bordure autour de la barre de menu et autour des Li, on voit que les cadres
des li sont plus bas que la ligne du div dans lequel ils se trouve. Je pense que c'est plus clair
sur l'image.

http://salvato-vallverdu.club.fr/img/effet.png

Je vous donne le contenu de la css en ce qui concerne le menu

Merci d'avance !

Voila les div

#barremenu {
    border: 1px solid red;  
    width: 820px;
    position: relative;
    left: -10px;
    height: 20px;
    margin-top:5px;
}
#gauchemenu {
    background: url(img/left.png) top left no-repeat;
}
#centremenu {
    height: 20px;
    text-align: right;
    position: relative;
    text-align: right;
    margin-left: 10px;
    margin-right: 10px;
    background: url(img/fond-menu.png) top left repeat-x;
}
#droitemenu {
    background: url(img/right.png) top right no-repeat;
}

et voila pour les li :

.menugauche {
    list-style: none;  /* supprime les puces */
    margin: 0;
    padding:0;
}

.menugauche li {
    float: left;
    color: #FFFFFF ;                  /* couleur du texte */
    font-family: Arial;
    font-size: 16;
    font-weight: bold;
    color: #000000;
    line-height: 3ex;
}

.menugauche li a {
    color: #FFFFFF; 
    height: 20px;
    padding: 0px 20px ;               /* gere l'espacement */
    text-align: center ;
    text-decoration: none;            /* supprime l'aspect lien */
    border: 1px solid red;  
}

.menugauche li a:hover, .menugauche li a:focus, .menugauche li a:active { 
    background: url(img/focus.png) repeat-x;
}