如何创建响应式选项卡式导航栏？

Question

在示例代码中，请注意.current类底部有灰色间隙。我的目的是将白色一直放到底部，但任何增加li大小的尝试也会扩展ul。

隐藏溢出对我来说是个问题，因为我仍然希望在li的顶部有偏移量。

如何将白色的.current li背景颜色延伸到ul元素的底部？

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>

Answer 1

你可以在<a>元素而不是<li>上设置当前的高亮样式，我还建议使用伪元素:before在顶部创建额外的空格。 / p>

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

如果您关心过时的IE，请按照以下文章创建CSS3 cross browser linear gradient。

Answer 2

如果您的样式必须位于list元素上，那么您可以将margin-bottom:-5px;和padding-bottom:5px;添加到.current类。否则我会建议使用Pangloss的样式来定位锚元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;