ホバー時にメニュー項目が移動する

Question

私のウェブサイトのメニューに問題があります。 「最初のレベル」からアイテムを移動すると、周囲の他のアイテムが近くに移動します。しかし実際には、メニューはFirefox上では完全に機能しますが、IEやChromeには問題があります。フィドルがあります：https://jsfiddle.net/sxfxjja5/とCSS：

#menu{ 
    width: 57%; 
    -webkit-width:60%; 
    margin-left: 22%; 
    -webkit-height:15%; 
    -webkit-margin-left:18%; 
    margin-top: 0%; 
    padding: 10px 0 0 0; 
    -webkit-padding:15px 0 0 0; 
    list-style: none; 
    background: linear-gradient(green, white); 
    height: 5%; 
    -moz-border-radius: 50px; 
    -webkit-border-radius:50px; 
    border-radius: 50px; 
    -moz-box-shadow: 0 2px 1px white; 
    -webkit-box-shadow: 0 2px 1px white; 
    box-shadow: 0 2px 1px white; 
    position:absolute; 
    z-index: 22; 

} 

#menu li{ 
    float: left; 

    padding: 0 0 10px 0; 

-webkit-padding:0 0 20px 0; 
    position: relative; 

} 



#menu a{ 
    float: left; 
    -webkit-width: 100%; 
    padding: 0 20%; 
    -webkit-padding-left:20%; 
    color: antiquewhite; /*couleur police onglets lvl 1 */ 
    text-transform: uppercase; 
    font: bold 77%/25px Arial, Helvetica; 
    width: 100%; 

    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a{ 
    color: green; 
} 



#menu li:hover > ul{ 
    display: block; 
} 

/* Sous-menu */ 

#menu ul{ 
list-style: none; 
margin: 0; 

padding: 0; 
display: none; 
position: absolute; 
top: 35px; 

z-index: 99999; 


background: linear-gradient(#444, #111); 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

#menu ul li{ 
float: none; 
margin: 0; 
padding: 0; 
display: block; 
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 

#menu ul li:last-child{ 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
} 

#menu ul a{ 
padding: 10px; 

height: auto; 
line-height: 1; 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 



#menu ul a:hover{ 
    background: linear-gradient(white, green); 

} 

#menu ul li:first-child a{ 
-moz-border-radius: 5px 5px 0 0; 
-webkit-border-radius: 5px 5px 0 0; 
border-radius: 5px 5px 0 0; 
} 

/*Le petit triangle */ 
#menu ul li:first-child a:after{ 

} 

#menu ul li:first-child a:hover:after{ 
border-bottom-color: #04acec; 
} 

#menu ul li:last-child a{ 
-moz-border-radius: 0 0 5px 5px; 
-webkit-border-radius: 0 0 5px 5px; 
border-radius: 0 0 5px 5px; 
} 

/* Rétablissement du flottement */ 
#menu:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 






/*Sous menu lvl 3 */ 
#menu ul li ul{ 
list-style: none; 
margin: 0; 
padding: 0; 
display: none; 
margin-left:100%; 
top: 0%; 
z-index: 99999; 
background: linear-gradient(#444, #111); 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

は、誰もが、それはすべてのブラウザにしてください動作するようにする方法を知っていますか？

Answer 1

-webkit-padding,-webkit-heightなどのコード内のいくつかを削除しました。

必要ありません。

私はリンク上の液体paddingも削除しており、その場合は浮動要素であるliの固定された埋め込みを行いました。

メニューのabsolute位置も削除し、100% widthを適用します。

See it here