Remove .has-dropdown arrow from foundation.css

Question

I'm trying to remove the arrow that shows that there is a dropdown.

I have found this:

.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
border-left-style: solid;
margin-right: 15px;
margin-top: -4.5px;
position: absolute;
top: 50%;
right: 0; }

and I have replaced it with this:

.top-bar ul > li.has-dropdown a:after { 
  content: "";
  display: none;
  width: 0;
  height: 0;
  border:0;
  border-color: none;
  border-left-style: none;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
}

Yet there is space after "About us". Any ideas how to remove it?

Here is some HTML:

<section class="top-bar-section">
    <ul  class="right">
        <li><a href="#">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
        <li><a href="#">Link #4</a></li>
        <li><a href="#">Link #5</a></li>
        <li class="has-dropdown">
            <a href="#">About us</a>
            <ul class="dropdown">
                 <li><a class="first-el" href="#">About the company</a></li>
                 <li><a href="#">Jobs</a></li>
                 <li><a href="#">Blog</a></li>
                 <li><a href="#">ToS</a></li>
                 <li><a class="last-el" href="#">Privacy</a></li>
            </ul>
        </li>
    </ul>
</section>

Answer 1

If you're using Foundation 4 (with sass, which is very much reccomended), you can remove the arrows by changing a setting in _settings.scss. It's this one:

$topbar-arrows: true; //Set false to remove the triangle icon from the menu item

Unfortunately, this also removes the arrows on the sublevel...