css - how to get alternating bottom-border colors for navigation -

how can navigation this? http://i.imgur.com/s0cap9d.png

here current code. https://gist.github.com/anonymous/9c239f1b541aa26d461b

i'm struggling line style. there way that?

thanks in advance!

cheers.

i have working borders here: http://jsfiddle.net/hazkh/39/ thing set color red of them, if want different need have special border color style nth-child style of nav ul element

these changed:

.header .menu-bar {   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; }    

and

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