How to highlight a selected link in a page by an arrow mark under that active link?

[Adio]

My html code is:\[code\] <div id="arrow"> <b>Filter By: </b> <a href="http://stackoverflow.com/questions/12724743/__#" onclick="GetAllTasks();" id="id_all" style="color: #88b807;">All</a> <input type="text" size="3" style="display: none;" id="DateFilter" /> <a href="http://stackoverflow.com/questions/12724743/__#" onclick="GetByDate(this);" style="vertical-align: middle;" id="cal_icon">EndDate</a> <a href="http://stackoverflow.com/questions/12724743/#"__0 onclick="GetMyTasks();" id="id_myposts">My Requests</a> </div> \[/code\]My css code is:\[code\]a:active {font-family: Verdana, Sans-serif; color:#FF0000; text-decoration:none; background: url("Images/arrow_down.png") no-repeat; background-position:center; }\[/code\]Here i want the arrow image to come under the active link so that it indicates that it is active.. I have tried the above code but i m not getting the desired output..