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

该网站尚未启用,但我希望我的屏幕截图能够使情况足够清楚。



html - 子菜单中的三 Angular 形与主菜单项重叠-LMLPHP

这是菜单的样子。这是一个WordPress安装程序,具有基本的导航功能,除了三角形之外没有其他自定义内容。



html - 子菜单中的三 Angular 形与主菜单项重叠-LMLPHP

这是我将鼠标悬停在Chrome检查器中的:before上时看到的。它覆盖了主菜单项的下半部分,使下半部分不可单击。



html - 子菜单中的三 Angular 形与主菜单项重叠-LMLPHP

这是给我固定height10px的样子。如您所见,三角形居中,但突出显示的部分在其上方开始。



这是我的代码:

菜单项

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/

最佳答案

的CSS

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


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

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


CSS Tricks
Developer.mozilla

关于html - 子菜单中的三 Angular 形与主菜单项重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40740573/

10-12 12:47
查看更多