Active menu problem!

Hello
I've made a WB template from some html template and now Im having a problem with the menu, the top active menu is not showing right. I posting a picture of what I mean and the codes for the menu.
I would like the arrow to be under the link. and I cant figure it out how to do this.

hope you understand.

Menu code:

Code:

<ul>

<li id="first" class="active"><a href="/"> <?php show_menu(1, 0, 1, true, '<li>[a][menu_title]</a>', '</li>','','',''); ?>

</a></li>

<li></li>

</ul>

CSS code:

Code:

#topnav li#first {background:none!important;}

#topnav .active a {background:url(../images/menuactive.gif) no-repeat center 27px; color:#184896;}

#topnav a:visited, #topnav a:active {color:#7098c6; text-decoration:none;}

#topnav a:hover {color:#184896;}

Thx in advance