Breadcrumb CSS

by JThomas

HTML

<div id="nav">
        <div class="after">
        <h3>Navigation Menu</h3>
            <div>
                <h5>Breadcrumb Navigation</h5>
                <ul class="nav-list breadcrumb">
                    <li><a href="#">Nav Item</a></li>
                    <li><a href="#">Nav Item</a></li>
                    <li><a href="#">Nav Item</a></li>
                    <li><a href="#">Nav Item</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS

.after {
    margin: 0;
    padding: 0;
    border: 0 solid #000;
    font-size: 1em;
    line-height: 1.68;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul.nav-list {
    margin: 0;
    padding 0;
    list-style: none;
}
ul.nav-list li {
    display: inline;
}

ul.nav-list li a {
    position: relative;
    display: inline-block;
    padding: 5px;
}
ul.nav-list li a:link, ul.nav-list li a:visited {
    color: #000;
    text-decoration: none;
}
ul.nav-list.breadcrumb {
    width: 100%;
}
ul.nav-list.breadcrumb li a {
    border: 1px #ccc solid;
    background-color: #eee;
    padding: 5px 10px;
}
ul.nav-list.breadcrumb li a:before {
    content:'';
    top: -1px;
    left: -5px;
    position: absolute;
    border: 19px solid transparent;
    border: 20px solid transparent \0/;
    border-left: 9px solid #ccc;
}
ul.nav-list.breadcrumb li a:after {
    content:'';
    top: -1px;
    left: -7px;
    position: absolute;
    border: 19px solid transparent;
    border: 20px solid transparent \0/;
    border-left: 10px solid #eee;
}
ul.nav-list li:first-child a:after,
ul.nav-list li:first-child a:before{
    display: none;
}