CSS more than any other aspect of code - from Javascript to PHP - is more difficult to me. It drives me crazy!

I am attempting to code a menu with irregular shapes that overlap. I used some of the advice from this thread as a guide:


Here is my attempt:


As you can see, the "tails" of my 2nd, 3rd, and 4th arrows are not showing up on the hover event. My CSS is in the head of the document. What am I doing wrong? Please help if you can...