How do you get a triangle hover effect on a pure css navbar?

Question

I would like to have a little triangle underneath the the text that points up when the user hovers over the different tabs. Here is a bit of code I\'m working with.

Answer 1

Here is a modification to your jsfiddle:

I've added a to contain the triangles in the HTML:

    
Home
    
About
    
Work
    
Social
    
Contact

Here are the changes made to your menu which reduce the size of the triangle and position them at the bottom center of each menu item when hovered over: CSS:

/*
.accordion_headings:hover{
    background:#00CCFF;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;
}
*/
.accordion_headings{
    position:relative;
}
.accordion_headings .arrow{
    display:none;
}
.accordion_headings:hover .arrow{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;

    display:block;
    position:absolute;
    bottom:0;
    left:49%;
}