active page marker (triangle) needs to be pulled down

hello,
i got a menu (@ dreamdesigns.nl/test)
and the white arrow sticks to the texts instead of the bottom of the menu
css code =

ul li {float: left;}
ul li a {display:block; text-decoration:none; text-align:center; padding-top:24px; height: 36px; width: 110px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300; font-size:8pt; color:#ffffff; text-transform:uppercase; border-right:1px solid #97BB24; background-color:#ABCF38; text-transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#97BB24; color:#D3F760
}

ul li a.first {border-left:1px solid #97bb24;}
ul li a.last {border-right:0}

.current {
	width: 0;
	height: 0;
    margin-bottom:0;
    padding-bottom: 0;
    margin-left:auto;
    margin-right:auto;
	border-left: 10px solid transparent;  /* left arrow slant */
	border-right: 10px solid transparent; /* right arrow slant */
	border-bottom: 10px solid #fff; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

html

<ul>

  <li><a class="first" href="#home">Home</a></li>
  <li><a class=href="#news">Dienstverlening <div class="current"></div> </a>  </li>
  <li><a href="#contact">wie zijn wij</a></li>
  <li><a href="#about">referenties</a></li>
    <li><a href="#about">contact</a></li>
</ul>