CSS triangle arrow menu active item

Question

I'm trying to put an arrow-up by using "pure" CSS on my active items menu. Problem, I have a weird output. here my FIDDLE. Do you know how to resolve it ?

    #cssmenu li.active a {
   /* display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 10px solid black;
}

Answer 1

The issue here is that the arrow is going to be as wide as the li that it describes. The best way to do something like this is to use a css pseudo element. What you are looking at is something like:

#cssmenu li.active a:before {
    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

Best of luck!

Updated Fiddle: http://jsfiddle.net/XLfcY/

Answer 2

div{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

for the pure css arrow

Answer 3

The arrow at the bottom as you asked

position: relative;
top: 60px;

here the fiddle link http://jsfiddle.net/suriyag/HwcTn/1/