如何创建响应式标签式导航栏？

Question

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

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

如何给.currentli背景色的白色延伸到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 在顶部创建额外的空间。

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

如果您的样式必须在列表元素上，那么您可以将margin-bottom:-5px; 和padding-bottom:5px; 添加到您的.current 类中。否则，我建议使用 Pangloss 对锚元素样式的回答。

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