【问题标题】：Multi-level drop down menu in CSS not working properlyCSS中的多级下拉菜单无法正常工作
【发布时间】：2020-07-16 13:54:17
【问题描述】：
我正在尝试通过使用 CSS 和 HTML 来高效地花费时间。我有一个包含两个级别的菜单，第二个级别显示在悬停时。它有效，但不是我想要的方式。我有几个问题：
- 二级菜单与一级菜单不相邻。
- 二级菜单项分散在它们所属的一级菜单项上，并且不会像应有的那样浮动到它的右侧。
- 菜单左侧有一个来源不明的边距。看看边框就能看到。
- 菜单第二项的样式也会影响第二级的第二个子项。内联 CSS 解决了这个问题，但还有其他更好的解决方案吗？
您可以在以下page 上看到代码。
请您指出我的错误吗？
【问题讨论】：
标签：
html
css
drop-down-menu
submenu
【解决方案1】：
要固定子菜单的位置，并防止主菜单项的大小发生变化，可以这样做：
给出子菜单（ul 元素-可以是你声明为.menu ul li ul）：
position:absolute-
padding:0（ul 元素的内置填充就是你所说的“未知来源的边距”）
-
left:100% 设置子菜单位置。
-
top:0 设置子菜单位置。
给它parent（li 元素-可以是你声明为.menu li））：
至于最后一个问题，我个人认为在您的情况下使用“nth-child”不是一个好的选择——我更喜欢为活动项目使用专用类。
但是，如果您想解决您在这里所做的事情，只需更具体地说明您想要样式的项目：
而不是这个选择器：.menu ul li:nth-child(2)，
使用这个选择器：.menu > ul > li:nth-child(2)。
因此样式将仅应用于主菜单的第二个直接li 子菜单。