纯css弹出子菜单无法正常显示

Question

我在纯CSS中创建了菜单下拉菜单，

这里，父div有position:relative，菜单弹出窗口有position:absolute，

当菜单悬停时，子菜单将显示为display:block，

但是在这里，悬停sarees（第一个菜单）弹出菜单显示完美，但是将鼠标悬停在最后一个菜单webmenus上，弹出窗口位于错误的位置（不同的位置）。上传的图片

我想在所有子菜单弹出窗口中设置相同的位置，例如sarees的子菜单弹出窗口。 这有什么css hack ...？

图片：

我想要所有菜单的这个位置

菜单显示位置错误

Answer 1

我注意到您正在使用position: relative菜单，包括下拉菜单。这就是你遇到这个问题的原因。您将菜单设置为绝对，并将其理解为相对于其各自的父级。如果删除position: relative，它将相对于页面设置绝对位置。

<强>更新
查看小提琴HERE
与另一个小提琴相比HERE
你看到了区别吗？


抱歉，如果我的英语不好

Answer 2

将position:relative;移至每个.menuTemplate1 li

这样，菜单将始终在左侧打开，如图所示。