Upon inspecting the sample code, you may have noticed that the .current class leaves a grey area at the bottom. I am trying to make it white all the way down, but every attempt to increase the size of the li also extends the ul.
I'm facing an issue with overflow hidden because I still want the top offset on the li element.
Is there a way to achieve the effect of having the background color of the .current li extend to the bottom of the ul element?
http://codepen.io/anon/pen/rVrvZv
.site-nav {
display: block;
}
.site-nav ul {
background: linear-gradient(0deg, #d0d0d0, #fefefe);
border-top: #bdbdbd solid 1px;
border-bottom: #bdbdbd solid 1px;
}
.site-nav ul li {
display: inline-block;
width: 16.366666%;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
background: linear-gradient(0deg, #d0d0d0, #fefefe);
}
.site-nav ul li:hover {
background: linear-gradient(0deg, #babcbf, #e1e3e6);
}
.site-nav ul li.current {
position: relative;
background: #fff;
width: 16%;
border-top: #bdbdbd solid 1px;
border-left: #bdbdbd solid 1px;
border-right: #bdbdbd solid 1px;
top: -5px;
}
.site-nav a {
font-family: Helvetica, sans-serif;
color: #616264;
text-transform: uppercase;
letter-spacing: .08rem;
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
filter: progid:DXImageTransform.Microsoft.Shadow(OffX=1, OffY=1, color=#e0e0e0);
font-size: .75rem;
}<div class="site-nav">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li class="current"><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
</ul>
</div>