Html CSS绝对对齐到列表项

我正在尝试在正确的位置动态设置Absolute框

目标是侧框将在所选子菜单上方启动，并在右侧位置显示其箭头

因此，如果选择最后一个子菜单项，它将如下所示：

为此，我创建了以下内容：

.menu-ul{
列表样式类型：无；
}
李先生{
填充：10px0；
边框顶部：1px实心rgba（50,50,50,0.3）；
宽度：100%；
光标：指针；
}
a{
字体系列：titilliumweb；
字体风格：普通；
字号：600；
字体大小：16px；
线高：24px；
字母间距：0.02em；
颜色：#323232；
文字装饰：无；
}
钮扣{
背景：无；
颜色：继承；
边界：无；
填充：0；
光标：指针；
大纲：继承；
字体系列：titilliumweb；
字体风格：普通；
字号：600；
字体大小：16px；
线高：24px；
字母间距：0.02em；
颜色：#323232；
文字装饰：无；
}
李：悬停{
颜色：#DB091C；
}
.子菜单ul{
填充：0px；
列表样式类型：无；
边框顶部：1px实心rgba（50,50,50,0.3）；
}
.子菜单li{
填充：10px；
右边填充：0；
宽度：计算（100%-10px）；
边框顶部：1px实心rgba（50,50,50,0.3）；
光标：指针；
}
.子菜单li：悬停{
边框顶部：1px实心#DB091C
}
人力资源部{
边框顶部：3倍纯色#bbb；
}
.openBox{
填充：0px；
列表样式类型：无；
边框顶部：1px实心rgba（50,50,50,0.3）；
位置：绝对位置；
左：50%；
排名：0；
宽度：100px；
宽度：323px；
高度：687px；
/*Hvid*/
背景：#FFFFFF；
盒影：0px 0px 30px rgba（0,0,0,0.25）；
}
.openBox:以前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-20px；
z指数：1；
边框：实心10px透明；
右边框颜色：#FFF；
}
.openBox ul{
文字装饰：无；
列表样式类型：无；
}
李先生{
填充：10px
}

标题



子菜单项1


子菜单项2


子菜单项1


子菜单项1


子菜单项1


子菜单项1


子菜单项1


子菜单项1


子菜单项1


子菜单项1







标题2


标题2

使子菜单lis位置相对

.sub-menu-li{
  position: relative;
}

.openBox{
  margin-top: -50px;
}

。子菜单li{
位置：相对位置；
}
.openBox{
利润上限：-50px；
}
.菜单ul{
列表样式类型：无；
}
李先生{
填充：10px0；
边框顶部：1px实心rgba（50,50,50,0.3）；
宽度：100%；
光标：指针；
}
a{
字体系列：titilliumweb；
字体风格：普通；
字号：600；
字体大小：16px；
线高：24px；
字母间距：0.02em；
颜色：#323232；
文字装饰：无；
}
钮扣{
背景：无；
颜色：继承；
边界：无；
填充：0；
光标：指针；
大纲：继承；
字体系列：titilliumweb；
字体风格：普通；
字号：600；
字体大小：16px；
线高：24px；
字母间距：0.02em；
颜色：#323232；
文字装饰：无；
}
李：悬停{
颜色：#DB091C；
}
.子菜单ul{
填充：0px；
列表样式类型：无；
边框顶部：1px实心rgba（50,50,50,0.3）；
}
.子菜单li{
填充：10px；
右边填充：0；
宽度：计算（100%-10px）；
边框顶部：1px实心rgba（50,50,50,0.3）；
光标：指针；
}
.子菜单li：悬停{
边框顶部：1px实心#DB091C
}
人力资源部{
边框顶部：3倍纯色#bbb；
}
.openBox{
填充：0px；
列表样式类型：无；
边框顶部：1px实心rgba（50,50,50,0.3）；
位置：绝对位置；
左：50%；
排名：0；
宽度：100px；
宽度：323px；
高度：687px；
/*Hvid*/
背景：#FFFFFF；
盒影：0px 0px 30px rgba（0,0,0,0.25）；
}
.openBox:以前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-20px；
z指数：1；
边框：实心10px透明；
右边框颜色：#FFF；
}
.openBox ul{
文字装饰：无；
列表样式类型：无；
}
李先生{
填充：10px
}

标题



子菜单项1


子菜单项2


子菜单项1