html - 我的下拉菜单有什么问题？

Question

我目前正在学习 CSS 和 HTML，我想仅使用 CSS 构建一个基本的下拉菜单。如果有人可以帮助我弄清楚发生了什么，有些事情我不明白。

这是它的样子

http://liveweave.com/eTdt7V

为什么我的菜单 1 被推到导航的顶部？我怎样才能避免这种情况？ 为什么我的子菜单 1 在菜单 1 的右边？我如何解决它？ 我的子菜单的高度超出了第一个 UL。应该是这样吗？

希望有人能帮助我理解这里发生的事情，这对我自己来说是一个宝贵的教训。我知道我可以找到一个在线教程，但我觉得从头开始是一个更好的学习机会，但现在我被困住了。

谢谢!

Answer 1

好的，这里有一些要点(我仍然建议您找到一些页面，例如 w3chool 或 here 或您可以找到的任何页面以了解更多信息或完全理解您的问题)

1. 菜单 1 被推开，因为您将第二个 ul 设置为 visibility:hidden - 它隐藏但仍占用相同的空间(宽度和高度)，因此如果您更改它到 display:none 并在你的第一个 ul 中删除 height:100px 它将变成一条线并且平滑(不要将高度设置为 ul，尤其是当它里面有 1 个或多个 ul 时，它会毁了你的菜单)
2. 您的子菜单 1 在菜单 1 的右侧，因为，嗯，不知道怎么说，所以我跳到解决方案来解决这个问题。要定位您的子菜单，我建议使用 position:absolute 和 margin 来定位您的子菜单(如果是垂直菜单则位于主菜单旁边，如果是水平菜单则位于主菜单下方)

这是我修改后的新CSS

body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}

这是新的 DEMO
希望你幸运地学习了 HTML 和 CSS!