html - 悬停时菜单项移动

Question

我网站的菜单有一些问题。当我从“第一级”悬停一个元素时，周围的其他元素会越来越近。但事实是菜单在 Firefox 上运行完美，但在 IE 和 chrome 上有问题。有 fiddle :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 上进行了固定填充，在这种情况下它们是 float 元素。

同时删除了菜单的 absolute 位置并应用 100% 宽度。

See it here