html - 为什么子菜单在 firefox 中显示正确但在 chrome 中显示不正确

Question

为什么 chrome 在子菜单上显示额外的 10 个像素？关于父菜单，他们是否以不同的方式呈现位置？这是 CSS:

#nav ul li ul{
display: none;
width: 250px;
opacity: .7;
z-index: 999;

}

#nav ul li:hover ul{
display: block;
background-color: #444444;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
border-top: 19px solid black;
}

查看实际效果:

http://guardianweb.edulence.com/model3/

Answer 1

基于 what I can see ，看起来 Chrome 和 IE9 正在适本地呈现页面，但 Firefox 11 不是。是this您指的是额外的 10 个像素？

就个人而言，我会删除 top: 20px 让 Firefox 11 呈现与 Chrome 和 IE9 相同的子菜单。