CSS 中的多级下拉菜单无法正常工作
Multi-level drop down menu in CSS not working properly
我正尝试通过玩 CSS 和 HTML 来高效地度过时间。我有一个有两个级别的菜单，其中第二个级别显示在悬停时。它有效，但不是我想要的方式。我有几个问题：
- 二级菜单与一级菜单不相邻。
- 二级菜单项展开它们所属的一级菜单项，而不是像它们应该的那样漂浮在它的右边。
- 菜单左侧有来历不明的边距。看边框就知道了
- 菜单第二项的样式也会影响到二级子项。内联 CSS 解决了这个问题，但是有更好的解决方案吗？
您可以在下面page看到代码。
你能指出我的错误吗？
要固定子菜单的位置，防止主菜单项的大小改变，可以按如下方式进行：
给出 子菜单（ul 元素- 可以是你声明的 .menu ul li ul）：
position:absolutepadding:0（ul元素的内置padding就是你所说的"margin of unknown origin"）left:100% 设置子菜单位置。top:0 设置子菜单位置。
给它 parent（li 元素 - 可以是你声明的 .menu li））：
position:relative
至于最后一期，我个人认为对您的情况使用 "nth-child" 不是一个好的选择-我更喜欢对活动项目使用专用的 class。
但是如果你想解决你在这里所做的事情，只需更具体地说明你想要设计的项目：
而不是这个选择器：.menu ul li:nth-child(2)，
使用这个选择器：.menu > ul > li:nth-child(2)。
因此样式将仅应用于主菜单的第二个直接 li 子项。
我正尝试通过玩 CSS 和 HTML 来高效地度过时间。我有一个有两个级别的菜单，其中第二个级别显示在悬停时。它有效，但不是我想要的方式。我有几个问题：
- 二级菜单与一级菜单不相邻。
- 二级菜单项展开它们所属的一级菜单项，而不是像它们应该的那样漂浮在它的右边。
- 菜单左侧有来历不明的边距。看边框就知道了
- 菜单第二项的样式也会影响到二级子项。内联 CSS 解决了这个问题，但是有更好的解决方案吗？
您可以在下面page看到代码。 你能指出我的错误吗？
要固定子菜单的位置，防止主菜单项的大小改变，可以按如下方式进行：
给出 子菜单（ul 元素- 可以是你声明的 .menu ul li ul）：
position:absolutepadding:0（ul元素的内置padding就是你所说的"margin of unknown origin"）left:100%设置子菜单位置。top:0设置子菜单位置。
给它 parent（li 元素 - 可以是你声明的 .menu li））：
position:relative
至于最后一期，我个人认为对您的情况使用 "nth-child" 不是一个好的选择-我更喜欢对活动项目使用专用的 class。
但是如果你想解决你在这里所做的事情，只需更具体地说明你想要设计的项目：
而不是这个选择器：.menu ul li:nth-child(2)，
使用这个选择器：.menu > ul > li:nth-child(2)。
因此样式将仅应用于主菜单的第二个直接 li 子项。