我:before
在子菜单类上添加了一个装饰三角形。但是,它涵盖了自己的主菜单项。
该网站尚未启用,但我希望我的屏幕截图能够使情况足够清楚。
这就是菜单的样子。这是一个WordPress安装程序,具有基本的导航功能,除了三角形之外没有其他自定义内容。
当我将鼠标悬停在:before
Chrome的检查器内部时,就会看到此内容。它覆盖了主菜单项的下半部分,使下半部分不可单击。
这就是我给定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/
的CSS
.sub-menu:before {
/* Your other css properties */
pointer-events:none;
}
注意如果元素上有click事件侦听器。它将遵守指针事件的值,并且不会触发。
关于指针事件的有趣文章:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句