Html 弹出菜单的三角形指向箭头

我有一个菜单（侧边栏），当您将鼠标悬停在相应的菜单项上时，将显示第二列及其子菜单。我需要做一个三角形指针，如图（问题中）所示。我不明白这是怎么做到的。请分享你的意见。谢谢!

.main{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
填充：50px0；
z指数：1000；
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：50px；
宽度：100%；
}
.主菜单内容列表{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
高度：700px；
宽度：250px；
}
.主菜单内容列表li{
列表样式类型：无；
}
.主菜单内容列表a{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体风格：普通；
字体大小：正常；
字号：18px；
线高：23px；
颜色：#D7DFE8；
文字装饰：无；
}
.主菜单内容列表子块{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：55px；
}
.主菜单内容列表子菜单{
证明内容：中心；
位置：绝对位置；
填充：0；
保证金：0；
左：100%；
高度：100vh；
背景色：#F0F6F8；
盒影：5px0px20pxRGBA（0,0,0,0.25）；
顶部：-50px；
指针事件：无；
不透明度：0；
过渡：所有线性0.1s 0s；
宽度：250px；
}
.主菜单内容列表li：悬停。主菜单内容列表子菜单{
不透明度：1；
指针事件：自动；
}
.主菜单内容列表子菜单弹出li：第一个子菜单{
利润率：50px0；
}
.main\u menu\u content\u list\u submenu\u popup li:not（：第一个子菜单）{
利润率：10px0；
}
.main\u menu\u content\u list li:悬停>.main\u menu\u content\u list\u子菜单{
显示器：flex；
}
.主菜单内容列表子菜单弹出{
字体风格：普通；
字体大小：正常；
字体大小：16px；
线高：21px；
颜色：#38618C；
}
.主菜单内容列表子菜单弹出菜单a：悬停{
颜色：#38618C；
文字装饰：下划线；
}
.主菜单内容列表子菜单弹出窗口a：活动{
颜色：#FF5964；
}
.主要内容{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
宽度：100%；
最大宽度：100%；
身高：100%；
}

使用此css

.main_menu_content_list > li.haveSubmenu > a:after{
    content: '';
    position: absolute;
    border: solid 10px;
    border-color: transparent #F0F6F8 transparent transparent;
    right: 0;
    opacity: 0;
}
.main_menu_content_list > li.haveSubmenu:hover > a:after{
    opacity: 1;
}

.main{
字体系列：PT SAN；
位置：相对位置；
显示器：flex；
弯曲方向：行；
最小高度：100%；
}
.主菜单{
显示器：flex；
弯曲方向：立柱；
宽度：自动；
背景色：#38618C；
填充：50px0；
z指数：1000；
}
.主菜单内容{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
顶部：50px；
宽度：100%；
}
.主菜单内容列表{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
高度：700px；
宽度：250px；
}
.主菜单内容列表li{
列表样式类型：无；
}
.主菜单\u内容\u列表>li.have子菜单>a:之后{
内容：''；
位置：绝对位置；
边框：实心10px；
边框颜色：透明#F0F6F8透明透明；
右：0；
不透明度：0；
}
.main\u菜单\u content\u list>li.have子菜单：悬停>a:after{
不透明度：1；
}
.主菜单内容列表a{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
字体风格：普通；
字体大小：正常；
字号：18px；
线高：23px；
颜色：#D7DFE8；
文字装饰：无；
}
.主菜单内容列表子块{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：55px；
}
.主菜单内容列表子菜单{
证明内容：中心；
位置：绝对位置；
填充：0；
保证金：0；
左：100%；
高度：100vh；
背景色：#F0F6F8；
盒影：5px0px20pxRGBA（0,0,0,0.25）；
顶部：-50px；
指针事件：无；
不透明度：0；
过渡：所有线性0.1s 0s；
宽度：250px；
}
.主菜单内容列表li：悬停。主菜单内容列表子菜单{
不透明度：1；
指针事件：自动；
}
.主菜单内容列表子菜单弹出li：第一个子菜单{
利润率：50px0；
}
.main\u menu\u content\u list\u submenu\u popup li:not（：第一个子菜单）{
利润率：10px0；
}
.main\u menu\u content\u list li:悬停>.main\u menu\u content\u list\u子菜单{
显示器：flex；
/* Add the following CSS configuration */
li:first-child ul.main_menu_content_list_submenu_popup::before {
    top: 4.5rem;
}

li:nth-child(2) ul.main_menu_content_list_submenu_popup::before {
    top: 11rem;
}

li:nth-child(3) ul.main_menu_content_list_submenu_popup::before {
    top: 18rem;
}

ul.main_menu_content_list_submenu_popup::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
    left: -0.5rem;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: #F0F6F8;
}