Menu items move when hover - html

Question

the menu for my website has some issues. When i hover an item from the "first level", the other items around get closer. But the fact is that the menu works perfectly on Firefox, but has issues on IE and chrome. There is the fiddle : https://jsfiddle.net/sxfxjja5/ and the 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;
}
Is anyone knows how to make it works on all browser please?

Answer 1

I removed a few things in your code, like -webkit-padding, -webkit-height and so on.
It's not needed.
I have also removed the fluid padding on links and do a fixed padding on li which are floating elements in that case.
Also removed absolute position of the menu and apply a 100% width.
See it here