Breadcrumb

breadcrumb

HTML

<nav class="breadcrumbs">
  <ul>
    <li>
        <input type="radio" id="r1" name="r">
        <label for="r1">Home</label>
    </li>
    <li>
        <input type="radio" id="r2" name="r">
        <label for="r2">blog</label>
    </li>
    <li>
        <input type="radio" id="r3" name="r">
        <label for="r3">kart</label>
    </li>
  </ul>
</nav>

CSS

body {
    font-family:arial;
    font-size:12px;
    line-height:1.5;
    margin:5px;
}

.breadcrumbs input[type=radio] {
    display:none;
}

.breadcrumbs ul {
    list-style:none;
    margin:0;
    overflow:hidden;
    padding:0;
    }

.breadcrumbs li {
    float:left;
    }

.breadcrumbs li label {
    -webkit-border-radius:3px 0 0 3px;
       -moz-border-radius:3px 0 0 3px;
            border-radius:3px 0 0 3px;
    -webkit-transition:color .2s;
       -moz-transition:color .2s;
         -o-transition:color .2s;
            transition:color .2s;
    background:#888;
    color:#fff;
    cursor:pointer;
    display:inline-block;
    line-height:26px;
    margin:0 10px 10px 0;
    min-width:5em;
    padding:0 20px 0 10px;
    position:relative;
    text-decoration:none;
    }

.breadcrumbs li label:after {
    background:#fff;
    border-bottom:13px solid transparent;
    border-left:10px solid #888;
    border-top:13px solid transparent;
    content:'';
    position:absolute;
    right:0;
    top:0;
    }

.breadcrumbs li label:hover {
    background-color:#0095aa;
    color:#fff;
    }

.breadcrumbs li input[type=radio]:checked + label {
    background-color:#0075aa;
    color:#fff;
    font-weight:700;
    }

.breadcrumbs li label:hover::after {
    border-left-color:#0095aa;
    }

.breadcrumbs li input[type=radio]:checked + label::after {
    border-left-color:#0075aa;
    }