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