如何获得交替的底部边框颜色进行导航

Question

如何使我的导航看起来像这样？https://i.stack.imgur.com/LSNHL.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;
}