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.
This is what the menu looks like. It's a WordPress installation, with a basic navigation, nothing custom except the triangle.
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.
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:
Does anyone have a fix or an alternative way to be able to use this triangle?
Here's a jsFiddle: https://jsfiddle.net/48omajxx/1/