CSS: dynamic menu with alternate borders

by gabrieleromanato

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
</li>
<li>
    <a href="#">Articles</a>
</li>
<li>
    <a href="#">Contact</a>
</li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {
    font: 100% 'Open Sans Condensed', sans-serif;
}

#nav {
    margin: 1em;
    padding: 0;
    list-style: none;
    height: 2em;
    border-bottom: 1px solid #ccc;
}

#nav li {
    float: left;
    height: 1.8em;
    margin-right: 1em;
    border-top: 0.2em solid #666;
}

#nav li:hover {
    border-top-color: #000;
}

#nav a {
    display: block;
    margin-top: 0.2em;
    height: 1.6em;
    line-height: 1.6;
    padding: 0 1em;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 0.2em solid;
}

#nav a:hover {
    border-top-color: #666;
}