background-image - 如何消除下拉菜单中的虚幻边距？

Question

我有一个垂直下拉菜单，效果很好。不过，我有一个无法解决的错误。

您可以在这里找到我的菜单:test Page

该菜单在 Internet Explorer 中运行良好(除了第一个子菜单上有一点下降，我可以接受(如果您知道那是什么，可以加分)，但在其他浏览器中，我的背景从子菜单返回到主菜单。“边距”从何而来？

到目前为止，我发现它与我为 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;
}

当为菜单使用无序列表时，删除边距和填充始终是个好主意，这样您从一开始就可以更好地控制布局