Hover et IE: comportement bizarre (menu volant)

Je m'explique: j'ai un menu vertical. Avec Firefox tout marche nickel(Normal)
Mais avec IE dès que je passe dessus avec la souris il se décale vers le haut et y reste.
Mais quand je clique sur le premier choix du menu, il (le menu) retourne à sa position initiale et voulu.

voici une partie de la css

ul.menu {
list-style-type: none;
padding:0;
margin-top: 22% !important;
margin-top:5%;
margin-left: auto;
margin-right: auto;
width: 75%;
height:70%;
background-color:transparent;
}

li {
margin:0;
padding:0;
margin-bottom:-5%;
float:left;
width:92%;
height:12%;
background-color:transparent;
font-size:80%;
font-weight:bold;
}

.menu a {
float: left;
display: block;
margin:3% !important;
background-position:left;
background-color:#2b2b91;
font-size:120%;
font-weight:bold;
text-decoration: none;
text-align:center;
color: #ffffff;
border:2px outset #9499ff;
width:85%;
height:100%;
}

.menu a:visited {
color: #ffffff;
border:2px outset #9499ff;
}

.menu a:hover {
color: #19196a;
background-color:#3052a7;
border:2px inset #9499ff;
}

et ça me fait la même chose avec cette autre menu mais à l'envers cad qu'en passant dessus dessus il descend. Voici le second css

ul.menuesp {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 25%;
left: 38%;
width: 20%;
background-color:transparent;
}

li.menuesp {
float: left;
width:80%;
height:45px;
margin:0;
padding:0;
background-color:transparent;
font-size:130%;
font-weight:bold;
}

.menuesp a {
float: left;
display: block;
margin:0;
padding:0;
background:url(../images/boutonorange.gif) no-repeat;
background-position:center;
background-color:transparent;
position:relative;
width: 170%;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
font-size:100%;
font-weight:bold;
color: #19196a;
border:0;
}

.menuesp a:visited {
float: left;
display: block;
margin:0;
padding:0;
background:url(../images/boutonorange.gif) no-repeat;
background-position:center;
background-color:transparent;
position:relative;
width: 170%;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #19196a;
border:0;
}

.menuesp a:hover {
color: #fd1616;
margin:0;
padding:0;
background:url(../images/boutonorange2.gif) no-repeat;
background-position:center;
background-color:transparent;
line-height: 46px;
color: #19196a;
}

Est-ce qu'il peut y avoir un conflit?
Modifié par Pops83 (05 Sep 2005 - 10:34)

Peut-être ici ton problème ?

.menuesp a:hover {
color: #fd1616;
margin:0;
padding:0;
background:url(../images/boutonorange2.gif) no-repeat;
background-position:center;
background-color:transparent;
[#red][b]line-height: 46px;[/b][/#] /* ??? */
color: #19196a;
}

En fait, il est plus prudent de ne pas déclarer de line-height sur l'élément <a>.

Up!
Merci Stephan mais ta réponse ne va pas.
C'est toujours la même chose.
J'ai supprimé le deuxième menu mais le problème persiste avec le premier menu.