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

Question

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

这是它的样子

http://liveweave.com/eTdt7V

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

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

谢谢！

Answer 1

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

菜单 1 被推开，因为你将第二个 ul 设置为 visibility:hidden - 它隐藏但仍然采用相同的 space（宽度和高度），所以如果你将其更改为 display:none 并删除第一个 ul 中的 height:100px 它将变成一条线并且平滑（不要将高度设置为 ul，尤其是当它有 1 个或多个 ul里面，它会毁了你的菜单）
你的子菜单 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!

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

What's wrong with my dropdown menu?

html

css

drop-down-menu