Question

我有一个相当好的垂直下拉菜单。我有一个我无法处理的错误。

您可以在此处找到我的菜单：test Page

菜单在网络浏览器中工作正常（除了第一个子菜单上的一点点，我可以忍受（如果你知道那是什么，可以获得奖励积分），但在其他浏览器中，我的背景从子菜单流回到主菜单。“保证金”来自哪里？

到目前为止，我发现它与我为li:hover个孩子设计风格有关

我的CSS中可能有用的片段

ul#menu3{
display:block;
left:20px;
margin:0;
width:10em;
padding:0;
position:absolute;
list-style:none;
}
ul#menu3 li{
color:#000000;/*
float:left;*/
position:relative;
margin:0;/*
margin-bottom:-1px;*/
line-height:31px;
text-align:center;
width:10em;
padding:0;
font-weight:bold;
display:block;
vertical-align:middle;
background-image:url(../../../menu4/awmdata/button-tile.gif);
}
ul#menu3 li:hover ul{
text-align:center;
vertical-align:bottom;
background-image:url(../../../menu4/awmdata/button-tile.gif);
background-repeat:repeat;
left:auto;
margin-top:-31px;
}
ul#menu3 li ul{
position:absolute;
left:-999em;
margin-left:10em;
margin-top:-31px;
}
ul#menu3 li ul li{
color:#000000;
margin:0;
left:auto;
padding:0;
font-weight:bold;
}

Answer 1

将它贴在styles.css的顶部

ul, li {
    margin: 0;
    padding: 0;
}

当为菜单使用无序列表时，最好删除边距和填充，以便从一开始就更好地控制布局

如何在下拉菜单中消除幻像边距？

1 个答案: