Edit in JSFiddle

<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>

.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;
}