How do I remove the border of all <li> elements on the last row?

Problem

I saw lots of explanations how to select the last element in a list and remove its border. Also how to select the second-to-last one with CSS3. But this is not enough for my case.

I have a horizontal navigation which floats to two columns for mid-size viewports, with a variable number of elements. There are four elements, but if the user is an administrator, there is a fifth element in the navigation. So, the last "cell" in what looks like a two-column table either has a <li> or doesn't.

This is what it looks like, currently (no borders removed):

enter image description here

I want that, when there are five elements, I can remove the bottom border of the "Help" item. And when there are four elements (with "Administration" missing), the bottom border of both Help and Administration are removed.

I tried giving "Help" its own class, with the idea that in the worst case, I can use JavaScript to assign the class either to the last or the two last elements depending on number of elements. But somehow the border didn't get removed.

By the way, I can't switch to top and left borders, because then the last "cell" in the odd-number case has no borders at all.

Code block below also available as fiddle.

 <div class="horizontal-nav clearfix">
                <div class="centering-horizontal-nav">
                <nav class="horizontal-nav clearfix">
                    <ul class="horizontal-nav">
                    <li> <a>Find models</a> </li>
                    <li> <a>Manage models</a></li>
                    <li> <a>Manage account</a> </li>
                    <li> <a>Administration</a> </li>
                    <li class="nav-no-border-bottom"> <a>Help</a> </li>
                    </ul>
                    <a href="#" id="pull">Menu</a>
                </nav>
                </div><!-- end centering horizontal nav -->

.centering-horizontal-nav{
        height: auto;
        width: 100%;
        display: block;
}

    nav.horizontal-nav { 
        height: auto;
    }
    nav.horizontal-nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav.horizontal-nav li {
        width: 50%;
        float: left;
        position: relative;
        display: block-inline;
        border-bottom: 1px solid #bfd1ed;
        border-right: 1px solid #bfd1ed;
        margin-left: -1px;
        line-height: 37px;
    }
    nav.horizontal-nav li a {
    }
    nav.horizontal-nav a {
        text-align: left;
        width: 100%;
        padding-left: 5%;
    }

    nav a#pull {
        display: none;
    }

    div.horizontal-nav {
        margin-top: 4px;
        margin-bottom: 4px;
        border: 1px solid #bfd1ed;
    }
    li.nav-no-border-bottom {
        border-bottom: none;
    }

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav.horizontal-nav{

    font-weight: 400;
        overflow:hidden;
}

    nav.horizontal-nav a {
        color: #ffffff;
}

    nav.horizontal-nav li a:hover, a:active {
        /* background-color: #5987d1 */
        /* text-decoration: underline; */
    }
.left-nav{ 
    float:left; 
    background-color:rgba(0,128,0,0.5);
    /* size parameters (will be overwritten in media queries) */
    width: 100%;
}

div.horizontal-nav{
    /* position:relative; 
    background-color: #2662c3;
    width:100%; */
    /* border: solid red 2px; */
    overflow:hidden;
        background-color: #2662c3;
}

ul{
    list-style-type: none;
}
Problem courtesy of: Rumi P.

Solution

I don't think there is any way in CSS to select the "bottom row" of elements in this way. However, you can obscure the bottom border regardless with a negative margin on the container:

.centering-horizontal-nav {
    margin-bottom: -1px;
}

http://jsfiddle.net/NEc2u/2/

Solution courtesy of: Explosion Pills

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.