列表上的CSS箭头悬停

我有一个边框为1px…100%宽度的列表菜单

参见图1：

现在是最难的部分。当鼠标悬停在菜单项上时，我需要在悬停的项下执行此操作：

参见图2：

---

我该怎么做？我一直在谷歌上搜索，没有发现任何东西。

使用相对定位列表项和旋转的绝对定位后组合，可以为您提供一个可能的解决方案：

*{
保证金：0；
填充：0；
列表样式：无；
}
ulli{
显示：内联块；
垂直对齐：顶部；
填充：1em 3em；
右边距：-4px；
边框底部：1px纯黑；
位置：相对位置；
}
ul li：悬停：在{
内容：''；
显示：块；
高度：16px；
宽度：16px；
背景：白色；
位置：绝对位置；
左：50%；
左边距：-8px；
变换：旋转（45度）；
底部：-9px；
左边框：1px纯黑；
边框顶部：1件纯黑；
}

项目1
项目2
项目3
项目4

悬停时使用伪元素创建箭头-