Question

Here’s my jsfiddle example:

http://jsfiddle.net/7PqqT/

Update: This is my work around solution: http://jsfiddle.net/7PqqT/1/

However I would like to achieve this same effect without needing the arrow divs to be in each li element.

Now what I’m going to be doing is having jquery addClass(‘current’) to whichever of the 3 li elements the user clicks on, and it I want the arrow to appear below that li element in the center of the text. I’m not sure the best way to do this, I’m hoping there’s a simple method to go about doing this.

Answer 1

Here you go, I updated your JSFiddle.

Basically, I just deleted the arrow div completely and change the arrow-related CSS to :before and :after pseudoelements. Works like a charm.