css - How to remove top border for one element in a list -

i building navigation unordered list:

<ul class="nav nav--block nav--banner multi-dropdown"><li class="first current"><a href="http://localhost/huayang/en/" title="home">home</a></li>     <li><a href="news/" title="news">news</a></li>     <li><a href="students" title="students">students</a></li>     <li><a href="locations" title="locations">locations</a></li>     <li><a href="contact" title="contact">contact</a></li>     <li class="last"><a href="about-us" title="about us">about us</a></li> </ul> 

i want navigation like:

notice how top border gone current navigation item? don't manage achieve. in order have top/bottom border apply whole navigation, have set ul element. in case, don't know how remove border active li item.

my css:

.nav.nav--block {    border-top: 1px solid $medium-grey;   border-bottom: 1px solid $medium-grey;    &>li.current {     background-color: $light-grey;     border-top: 1px solid $light-grey;     border-left: 1px solid $medium-grey;     border-right: 1px solid $medium-grey;   }     &> li > {     padding: 12px 35px;     text-decoration: none;     color: $dark-grey;   } } 

which gives me:

any idea how solve problem?

one approach simple this.

.currentitem { padding-bottom: 6px; /*increase padding width of border */     margin-bottom: -6px; /* offset amount, or use relative positioning may better. */     position: relative; /* method or margin offset */     bottom: -6px; /* method or margin offset */ } 

i'm sure there many others, more elegant. these should work.

if it's top border, see now, opposite:

.currentitem { padding-top: 1px; /*increase padding width of border */     margin-top: -1px; /* offset amount, or use relative positioning may better. */     position: relative; /* method or margin offset */     top: -1px; /* method or margin offset */ }