Css 如何获得用于导航的交替底部边框颜色

我怎样才能使我的导航看起来像这样？

这是我目前的代码。

我真的只是在挣扎于线条风格。有办法吗

提前谢谢

---

干杯。

我让它在这里处理边界： 唯一的问题是，我将所有元素的颜色都设置为红色，因此如果希望颜色不同，则需要为nav 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;
}