html - css下拉菜单在错误的位置

Question

我对纯 CSS 下拉菜单的定位有疑问。您可以在以下位置找到该网站： 链接到网站

当您将鼠标悬停在“教程”（我并没有真正做任何事情，但它是为了学习）和“博客”时，您会看到下拉菜单位置不在选项卡的正下方，而是向右移动。

如何将下拉菜单放在选项卡下？我在这里先向您的帮助表示感谢。

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's、padding's 等的浏览器默认值。

您可以在 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;
}