Options nav

by J. Albert Bowden

HTML

<ul class="nav options">
    <li><a href=#>Mon</a></li>
    <li><a href=#>Tue</a></li>
    <li><a href=#>Wed</a></li>
    <li class=current><a href=#>Thu</a></li>
    <li><a href=#>Fri</a></li>
    <li><a href=#>Sat</a></li>
    <li><a href=#>Sun</a></li>
    <li><a href=#>All</a></li>
</ul>

CSS

/* Housekeeping */
html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
}
a{
    text-decoration:none;
}
    a:hover{
        text-decoration:underline;
    }

/* Clearfix */
.cf:before,
.cf:after,
.nav:before,
.nav:after{
    content:"";
    display:table;
}
.cf:after,
.nav:after{
    clear:both;
}
.cf,
.nav{
    zoom:1;
}

/* Nav abstraction */
.nav{
    list-style:none;
    margin-left:0;
    padding:0;
}
    .nav li{
        display:inline;
    }
        .nav a{
            display:inline-block;
        }

/* Options */
.options{
    line-height:1;
}
    .options li{
        float:left;
    }
        .options a{
            display:block;
            padding:1em; /* Set in ems to scale with font-size. */
            color:#333;
            border:1px solid #ccc;
            border-left:none;
            background-color:#eee;
        }
        .options li:first-child a{
            border-left:1px solid #ccc;
            -moz-border-radius:5px 0 0 5px;
            -webkit-border-radius:5px 0 0 5px;
            border-radius:5px 0 0 5px;
        }
        .options li:last-child a{
            -moz-border-radius:0 5px 5px 0;
            -webkit-border-radius:0 5px 5px 0;
            border-radius:0 5px 5px 0;
        }
        .options .current a{
            position:relative;
            text-decoration:underline;
            cursor:text;
            color:#fff;
            background:#666;
            border-color:#666;
            
            -moz-box-shadow:0 0 5px rgba(0,0,0,0.25) inset;
            -webkit-box-shadow:0 0 5px rgba(0,0,0,0.25) inset;
            box-shadow:0 0 5px rgba(0,0,0,0.25) inset;
        }
            .options .current a:after{
                content:"";
                position:absolute;
                top:100%;
                left:50%;
                margin-left:-0.5em;
                width:0;
                height:0;
                border:0.5em solid transparent; /* Set in ems to scale with font-size. */
      ...