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 */ }
Comments
Post a Comment