Css 屏幕左侧显示的下拉菜单

我一直在尝试下拉列表。现在，我的菜单看起来非常像我想要的，但是我的下拉列表显示在屏幕的左侧，而不是直接显示在其父菜单的下方

示例：

.nav{
背景色：rgba（0,0,0,8）；
高度：56px；
线高：56px；
宽度：100%；
位置：固定；
排名：0；
z指数：1000；
}
保险商实验室{
文本对齐：居中；
保证金：0；
填充：0；
转换：.2s易进易出；
}
ulli{
显示：内联；
转换：.2s易进易出；
}
ullia{
背景色：红色；
显示：内联块；
填充：0 16px；
}
ul li ul{
文本对齐：左对齐；
不透明度：0；
位置：绝对位置；
可见性：隐藏；
}
ul-li：悬停ul{
不透明度：1；
能见度：可见；
}
ulli ulli{
颜色：rgba（0,0,0,8）；
显示：块；
}

只需在CSS中添加以下内容：

ul li {
  position: relative; 
}

绝对

定位元素的父元素必须有一个

位置

值，而不是

静态

（这是默认值，即使它未包含在CSS中）

编辑：此父元素必须是块元素（您的

当前是内联元素），因此您还必须添加：

ul li {
      position: relative; 
      display: inline-block;
    }

---

另请参阅更新的代码笔：

，不幸的是，这并不能解决我的问题。我用一个例子在我的问题中添加了一个图像。

display:inline block

为我做了这件事<代码>位置：不需要相对。但如果添加它，效果会更好：这样子菜单的位置参考实际上是主菜单项，而不是导航元素或其他任何内容。