css下拉菜单位置错误

Question

我在定位纯css下拉菜单时遇到问题。您可以在以下网址找到该网站： link to website

当您将鼠标悬停在“Tutorials”（即使我没有做任何事情，但它是用于学习）和“Blog”时，您会看到下拉菜单位置不在标签下方，它会向右移动。

如何在选项卡下放置下拉菜单？感谢您的帮助。

Answer 1

尝试编辑“main.css”文件，更改此内容：

ul#nav li ul{
position:absolute;
display:none;
}

为此：

ul#nav li ul{
position:absolute;
display:none;
padding:0;
margin:0;
}

我认为这会解决你的职位问题。

Answer 2

您需要重置元素上margin，padding等的浏览器默认值。

您在CSS顶部可以做的最小值是：

html,body,ul,li,p { margin:0;padding:0 }

查找http://cssreset.com以获取更多选项。

Answer 3

这是因为您的浏览器会自动将自定义CSS添加到某些元素，例如“ul”标记。 我正在使用Chrome，我看到所有子列表都有这种风格：-webkit-padding-start：40px; 所以只需添加此css：

ul#nav li ul{
padding-left:0;
}