Question

我网站的菜单有一些问题。当我从＆＃34;第一级＆＃34;中悬停一个项目时，其他项目会更近。但事实是该菜单在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

悬停时菜单项会移动

1 个答案: