CSS tabs arrow on active tab

Question

How can i have an arrow on the active tab in the tabbed pages i've created?

http://jsfiddle.net/okwhyrpc/2/

I've attached my jsfiddle with my solution so far.

li.current::after {
    color: #222222;
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #30B3EE transparent;
    background-image: url('data:image/png;base64,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')!important;
    *background-image: url(../img/sprites/nav.png)!important; /* For IE 6 and 7 */
    background-repeat: repeat-x;
    display: block;
    width: 0;
}

Thanks

Answer 1

At the moment you have the position set to absolute for the arrow. You need to set the parent to relative or it will position absolute to the body.

Add position: relative; to ul.tabs li to fix the problem.

Demo Here