How to create a responsive tabbed style navigation bar?

Question

In the example code, notice the .current class has a grey gap at the bottom. My intent is to make that white all the way to the bottom, but any attempt to increase the size of the li just also expands the ul.

Overflow hidden is a problem for me because I still want the offset on the top of the li.

How can I give the effect of the .current li background color of white extending 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>

score 1 · Accepted Answer · edited May 23 '17 at 11:58

You could set the current highlight style on the <a> element rather than the <li>, I also suggest to use a pseudo element :before to create the extra space at the top.

JSFIDDLE DEMO

.site-nav ul {
    padding: 0;
    margin: 0;
    font-size: 0; /*remove inline block gap*/
}
.site-nav ul li {
    background: linear-gradient(#fefefe, #d0d0d0);
    border-top: #bdbdbd solid 1px;
    border-bottom: #bdbdbd solid 1px;
    display: inline-block;
    width: 16.66%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
}
.site-nav ul li a {
    display: block;
    font-family: Helvetica, sans-serif;
    font-size: .75rem; /*reset font size*/
    text-transform: uppercase;
    letter-spacing: .08rem;
    text-decoration: none;
    color: #616264;
    text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
.site-nav ul li a:hover {
    background: linear-gradient(#e1e3e6, #babcbf);
}
.site-nav ul li.current a {
    background: #fff;
    border: #bdbdbd solid 1px;
    border-width: 0 1px;
}
.site-nav ul li.current a:before {
    content: "";
    height: 4px;
    display: block;
}

<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>

If you care about outdated IEs, follow this post for creating CSS3 cross browser linear gradient.

score 1 · Answer 2 · answered Jul 18 '15 at 17:28

If your style has to be on the list element then you can add margin-bottom:-5px; and padding-bottom:5px; to your .current class. Otherwise I would suggest going with Pangloss's answer of styling the anchor element.

  .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;
      padding-bottom:5px; /* add this */
      margin-bottom:-5px; /* add this */
  }

  .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>

How to create a responsive tabbed style navigation bar?

2 Answers2