Getting rid of underline bottom in submenus

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<section class="top-bar-section">
    <ul id="main-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Services</a></li>
    </ul>
</section>

CSS

.top-bar, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form) a:not(.button):hover {
    background-color: #f3f4f6;
    background: #f3f4f6;
    color: #726658;
    font-size: 1rem;
}
.top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button) {
    line-height: 4.2rem
}
.top-bar-section li ul li:not(.has-form) a:not(.button) {
    line-height: 2.5rem
}
.top-bar-section ul li a {
    text-transform: uppercase;
    color: #726658;
}
.top-bar-section > ul > li, .top-bar-section li a, .top-bar-section li a:hover, .top-bar-section li.active {
    background: #f3f4f6;
}
.top-bar-section .has-dropdown > a:after {
    content:"\f107";
    font-family: FontAwesome;
    border-top-style: solid;
    margin-top: 0;
    top: -.3rem;
}
.top-bar-section .has-dropdown > a {
    padding-right: 1.5rem !important;
}
.top-bar-section ul li:hover:not(.has-form)>a {
    color: #424242 !important;
    background: transparent;
}
.top-bar-section li ul li:hover:not(.has-form)>a {
    color: #ffffff !important;
}
.dropdown {
    text-align: right;
}
.top-bar-section li ul li {
    background: #424242;
}
.no-js .top-bar-section ul li:hover > a, .top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button) {
    background: transparent;
}
.top-bar-section ul li a:hover, .top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button):hover {
    color: #424242;
    background-color: #f3f4f6;
    background: #f3f4f6;
}
ul {
    list-style: none;
}
#main-nav .active {
    border-bottom: 2px solid #424242;
}

JavaScript

$("#main-nav li").click(function () {
    $("#main-nav li.active").removeClass("active");
    $(this).addClass("active");
});