css - 如何为导航获取交替的底部边框颜色

Question

我怎样才能让我的导航看起来像这样？ http://i.imgur.com/S0cAp9d.png

这是我当前的代码。 https://gist.github.com/anonymous/9c239f1b541aa26d461b

我真的只是在与线条风格作斗争。有没有办法做到这一点？

提前致谢！

干杯。

Answer 1

我在这里使用边框：http: //jsfiddle.net/HAZKh/39/ 唯一的事情是我将所有颜色都设置为红色，所以如果你想让它与众不同，你需要有特殊的导航 UL 元素的第 n 个子样式的边框颜色样式

这些是我改变的：

.header .menu-bar a {
  text-align:center;
  display:block; 
  color: #989898;
  margin: 0 auto
  font-size: 20px;
  font-weight: 100;
  text-decoration: none; 
  border-bottom: solid 1px red;
  padding-right: 32px;
  padding-left: 0px;
}   

和

.header .menu-bar li {
  float: left;
  border:medium #0F0;
  /* padding: 0 32px; */
  padding-left: 32px;
}