Looking to add graphic to active menu item

I would like to add a tick mark to an active menu item, but can't seem to figure out how to with my current code. Here's a graphic of what I'm trying to accomplish (notice the tick mark hanging down (centered):

Any assistance would be greatly appreciated.

You may see the current site at: http:开发者_如何学编程//www.redone.org/_dev/ski/menu2.html

The background-image solution presented in the other answers is the most common way to solve this problem. A nice alternative is also available since this particular graphic, a triangle, can be easily created in HTML + CSS; no images, canvas, SVG/VML or plugins required.

<div style="
    position:absolute; 
    width:0; 
    right:0; 
    border: 10px solid #fff;
    border-top-color: #000;
    "></div> 

I created a basic example of a menu using this technique. Polygons in CSS were explored at least as far back as 2001 by Tantek Çelik.

on the mouseover of below element

current_page_item

change the background image for that..//make one image with that color like call out

// this is like a psuedo code, this doesn't work in ie7 so you can use jquery

li a:hover 

    {
    background-image: url(images/callout.jpg);
    }

Your "current" menu item should be assigned an extra class (like "current"). Then you add a css rule for the "current" class which displays the extra graphic at the bottom.

Thanks for pointing me in the direction. Here's what ended up working for me:

#headerline {
    overflow: visible;
    border-bottom: 1px solid #2c5e93;
    height: 40px;
}

#menu-main-menu li.current_page_item a{
    color: #014783;
    background-color: #89cefa;
}

#menu-main-menu li.current_page_item {
    height: 50px;
    background-image:url(ski_tick.png);
    background-position:center;
    background-repeat:no-repeat;
}