Problèmes avec un menu CSS

Bonjour,
Je rencontre quelques problèmes avec un menu CSS.
Les points que je n'arrive pas à résoudre sont les suivants:
-Quand on fait un mouseover sur un des éléments du menu (exemple: Galerie), l'élément devient blanc mais un liserêt beige subsiste au dessus du blanc. Je n'arrive pas à l'enlever.
-Toujours lorsque l'on passe la souris sur les éléments du menu, ceux-ci deviennent blanc mais il y a un vide beige entre les éléments du menu.
Vos suggestions sont les bienvenues.
Cordialement,
Julien.

<div id="menu">
                    <span id="locale-component"><a href="./Accueil   Jean-Baptiste Martin Sculptures_files/Accueil   Jean-Baptiste Martin Sculptures.xhtml" id="francais" hreflang="fr" lang="fr">Français</a> | <a href="http://localhost:8080/jeanbaptistemartin/lang/en/" id="english" hreflang="en" lang="en">English</a></span>
    <ul>
            <li id="active"><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/#">Accueil</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/galerie" id="galerie">Galerie</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/biographie" id="biographie">Biographie</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/commandes-personnalisees" id="commandes-personnalisees">Commandes personnalisées</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/alertes" id="alertes">Alertes</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/contact" id="contact">Contact</a></li>
            <li><a href="http://localhost:8080/jeanbaptistemartin/lang/fr/liens" id="liens">Liens</a></li>
    </ul>
                </div>

/****************locale-component***************************/
#locale-component{
    float: left;
    padding-left: 1em;
    vertical-align: middle;
}

/****************menu***************************/
#menu ul {
    margin:0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    max-width: 1024px;
    background: #E5E2CC;
}

#menu ul li {
    display: inline;
    vertical-align: middle;
    padding: 0.2em 0.3em;
}

#menu ul li a {
    text-decoration: none;
    color: #564026;
    padding: 0.2em 0.3em;
    /* border: 1px solid;*/
    text-align: center;
    vertical-align: middle;
}

#menu a:hover {
    background-color: #ffffff;
}

#active {
    font-weight: bold;
}

Hello,
Essaie en enlevant le padding de tes li, puis en fixant la hauteur de tes li et de tes a. (utilise display:block)

vdo93 a écrit :
Hello,
Essaie en enlevant le padding de tes li, puis en fixant la hauteur de tes li et de tes a. (utilise display:block)

Je crois que ça marche. Merci!!
J.