css - 如何让这个三级菜单的子菜单在其父菜单下对齐？

Question

我在弄清楚这个菜单时遇到了麻烦，我正在对它的菜单进行一些更改，以使其在触摸设备上更有用。因此我需要 CSS 的第一部分保持正常屏幕的状态，然后必须用触摸样式覆盖它。但是我试图在选择服务时将服务子菜单定位在服务下方。看草图。我创建了一个 fiddle 来展示我的问题。

我的主要问题，解决它的方法是，我似乎无法让 ul.level_2 将自己定位在选定的 li 下，无论是绝对位置还是 float 和清除。有什么想法吗？

JS fiddle of problem

Answer 1

我对您的示例进行了一些简化，以向您展示实现此目的所需的最少 CSS。 http://jsfiddle.net/3EKAq/10/

子菜单的定位应该相当容易，它几乎是自动进行的，如您所见，不需要定位。

我认为关键在于清除要出现在左侧的菜单元素，在本例中为第 4 个。您还可以考虑使用 :n-th child css3 选择器，但我不会为了跨浏览器兼容性而这样做。

希望这能让您朝着正确的方向前进。如果您需要更多帮助，请随时告诉我们!