Simple nav abstraction

When creating any sites I can be pretty sure that I will need several components that consist of a series of horizontal links contained in either a ul or an ol.

Rather than repeatedly building these components over and over I decided to create what I call ‘the nav abstraction’ to abstract out the repeated design pattern into a reusable, extendable class:

.nav{
    list-style:none;
    margin-left:0;
}
    .nav > li,
        .nav > li > a{
            display:inline-block;
            *display:inline;
            zoom:1;
        }

As easy as that.

Now we have a transportable class that we can apply to any lists that we can then extend, for example:

<ul class="nav site-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

<ol class="nav breadcrumb">
    <li><a href="/about/">About</a></li>
    <li><a href="/about/team/">Team</a></li>
    <li><a href="/about/team/directors/">Directors</a></li>
</ol>