PeterPrakker PeterPrakker - 10 months ago 60
CSS Question

Triangle in sub-menu overlaps main menu-item

I added a decorative triangle using a :before on the sub-menu class. However, it covers its own main menu-item.

The website is not live yet, but I hope my screenshots will make the situation clear enough.

enter image description here

This is what the menu looks like. It's a WordPress installation, with a basic navigation, nothing custom except the triangle.

enter image description here

This is what I see when I hover on the :before inside of Chrome's inspector. It covers the bottom half of the main menu-item, making the bottom half unclickable.

enter image description here

This is what it looks like when I give it a fixed height of 10px. As you can see the triangle is centered, but the highlighted part begins above it.

Here's my code:


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;

Does anyone have a fix or an alternative way to be able to use this triangle?

Here's a jsFiddle:

Answer Source


.sub-menu:before {
    /* Your other css properties */

Note If there is a click event listener on the element. It will respect the pointer-events value and does not fire.

Interesting articles about pointer events: