子菜单中的三角形与主菜单项重叠

Question

我在子菜单类上使用:before添加了装饰三角形。但是，它涵盖了自己的主菜单项。

该网站尚未上线，但我希望我的屏幕截图能让情况变得清晰。

这就是菜单的样子。这是一个WordPress安装，带有基本导航，除了三角形之外没有任何自定义。

当我将鼠标悬停在Chrome检查员的:before内时，就会看到这一点。它覆盖主菜单项的下半部分，使下半部分不可点击。

当我给它一个固定的height 10px时，这就是它的样子。如您所见，三角形居中，但突出显示的部分从它上方开始。

这是我的代码：

菜单项

position: relative;
float: left;
z-index: 999999;

子菜单

text-align: center;
width: auto;
color: #78A22F;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;

子菜单：前

content: "\f0d8";
font-family: FontAwesome;
font-size: 40px;
position: absolute;
top: -36px;
left: 0;
width: 100%;
color: #78A22F;
line-height: 0px;
z-index: 2;

是否有人有修复或替代方法可以使用此三角形？

编辑： 这是一个jsFiddle：https://jsfiddle.net/48omajxx/1/

Answer 1

CSS

.sub-menu:before {
    /* Your other css properties */
    pointer-events:none;
}

注意 如果元素上有单击事件侦听器。它将尊重指针事件值并且不会触发。

有关指针事件的有趣文章：

• CSS Tricks
• Developer.mozilla