Html CSS悬停下拉菜单，绝对位置？

描述这一问题的最好方法是用图片（不要介意荷兰人），我现在只能说：

在第一个示例中，您可以看到，在本例中，红色下拉菜单将鼠标悬停在与父对象的直线上。我想要的是：

我在示例2中的做法是使用element inspect，并使用margin top（40px）手动更改Ul。这意味着我必须在接下来的两个菜单链接上进行80px、120px等操作

有没有更简单的方法

---

提前谢谢

相对于菜单容器（

）而不是菜单项（

）定位下拉菜单

一个简单的例子

相关HTML：

<ul class="outer">
  <li>
    Beelden

    <ul class="sub-menu">
      <li>Geurkaarsen</li>
      <li>Rituele kaarsen</li>
      <li>Affirmatie kaarsen</li>
    </ul>
  </li>
</ul>

现场演示：

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
高度：100vh；
}
车身>ul{
/*下一行至关重要*/
位置：相对位置；
背景色：#c5e2d8；
宽度：30%；
身高：100%；
}
ul子菜单{
显示：无；
位置：绝对位置；
排名：0；
右图：-100%；
宽度：100%；
背景色：番茄；
}
李{
显示：块；
颜色：#444；
填充：.5em；
光标：指针；
}
有孩子吗{
内容:'▸';
位置：绝对位置；
右：5px；
}
李。有孩子：哈弗{
背景色：番茄；
}
李有孩子：哈弗ul{
显示：块；
}

比尔登

格卡森
里图埃尔·卡森酒店
卡森确认书



卡森

子菜单2
我不知道
任何荷兰人


维罗克
克鲁登
奥林

发布一个最小的工作代码片段为了提高您的问题的质量，请在您的文件中发布足够的代码，以便我们能够复制（并修复）问题。尝试给出内容区域

位置：相对

然后将下拉列表放置在此容器内，并将其放置在

absolute

的

top:0

和

left:0

位置。不过，对于较低级别的菜单，这可能看起来很尴尬。

/* Your outer menu */
ul.outer {
  position: relative;
}

li {
  /* Whatever styles you set here, don't give it relative positioning */
}

ul.sub-menu {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
}