Sidebar Navigation of smashing magazine style

I thought it will be hard to implement such beautiful navigation. I was wrong about that. This smashing magazine style left navigation is implemented with just HTML and CSS.

Please note that I have used bootstrap framework to implement the navigation.

There are other navigation styles you might be interested in

1. Twitter desktop style navigation
2. Google apps style navigation

HTML for the left navigation

<div class="navigation">
    <div class="nav1">
        <ul class="nav nav-stacked" style="padding-bottom:30px;">
        <li><a href="#" class="title">CODING</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
    </ul>
    </div>
   
     <div class="nav2">
        <ul class="nav nav-stacked" style="padding-bottom:30px;">
        <li><a href="#" class="title">DESIGN</a></li>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Typography</a></li>
        <li><a href="#">Business</a></li>
    </ul>
    </div>
    <div class="nav3">
        <ul class="nav nav-stacked" style="padding-bottom:30px;">
        <li><a href="#" class="title">GRAPHICS</a></li>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Fireworks</a></li>
        <li><a href="#">Wallpapers</a></li>
    </ul>
    </div>
   
</div>

CSS for smashing magazine style navigation

.navigation {
    width:200px;
    position:relative;
    height:auto;
    margin:50px;
}
.nav1 {
   border-left:10px solid #c9e9e5;
    transition:border-color .3s
}

.nav1:hover {
    border-left:10px solid #63BFB2;
}

.nav2 {
    border-left:10px solid #cdeeaa;
    transition:border-color .3s
}

.nav2:hover {
    border-left:10px solid #6ECE0A;
}
.nav3 {
    border-left:10px solid #e0cfdf;
    transition:border-color .3s
}

.nav3:hover {
    border-left:10px solid #A675A2;
}

ul.nav-stacked li {
    margin:0;
    padding:0;
}
ul.nav-stacked li a {
    transition:all .3s;
    color:#666;
    border-bottom: 1px solid transparent;
}
ul.nav-stacked li a.title {
    font-size:17px;
    font-weight:bold;
    color:#333;
}
ul.nav-stacked li a:hover {
    background-color:yellow;
    color:#333;
}