z-index property doesn't work on hover menu links

I made a menu bar, and custom effect on hover. I wanted the link text to be on top layer. Problem is that when I hover the link in menu, the triangle overlays the text as shown in example, even though I set the

Another solution:

As Roko C. Buljan mentioned in the comments, a more straight-forward solution can be to build the arrow pseudo element properly (the second border color needs to be transparent, instead of the background's color: