使用z-index后，不能将:: after伪后面显示在它的父元素下面

Question

我的目标是在它的父弹出菜单下面放置一个CSS伪箭头。

将伪元素的z-index设置为-1有效...即，如果我没有在父元素上设置z-index。

问题是它是一个弹出窗口，父窗口必须设置z索引。

如何为父级设置z-index，并在下方显示伪？

.dropdown-menu {
    top: calc(100% + 5px);
    display: block;
    position: absolute;
    background-color: white;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    z-index: 9999;
    min-width: 150px;
}

.dropdown-menu::before {
    background-color: #706f6f;
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    height: 10px;
    width: 10px;
    transform: translate(-50%, 0) rotate(45deg);
    box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
    margin-top: -5px;
    top: 100%;
    z-index: -1;
}