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

【问题标题】：Triangle in sub-menu overlaps main menu-item子菜单中的三角形与主菜单项重叠
【发布时间】：2017-04-06 01:15:30
【问题描述】：

我在子菜单类上使用: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/

【问题讨论】：

创建一个 JSfiddle 演示..
你有没有试过在z-index:-1;之前给出：
@Sanjeev K 我添加了一个 jsFiddle 演示。它看起来与屏幕截图中的导航不太接近，但具有相同的功能。 @Paul 是的，我也尝试过负 z-index，但没有成功
.sub-menu:before {pointer-events:none} 这当然不是最优雅的方式，但更像是一种快速修复。
@Paul 这正是我所需要的......谢谢！（如果你愿意，你可以再次发布这个作为答案而不是评论，所以我可以投票）

标签： html css wordpress menu

【解决方案1】：

CSS

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

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

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

【讨论】：