HTML+CSS: How to add arrow to horizontal menu items?

[UHOHitsmee]

This is how looks like the item in menu bar without hover:

Here is with hover effect:

And here is the arrow that I am trying to add:

My current CSS formulas looks like:\[code\]ul.profile_menu { background: url('menu.png') repeat-x; list-style-type: none; margin: 0; padding: 0; float: left; li { display: inline; a { float: left; } a:hover { background: url('active_item.png') repeat-x; height: 45px; } } }\[/code\]But how to add the arrow on the bottom of active item?Thanks in advance