<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Work</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> </div>

body{ margin: 0px; padding: 0px; background: #000; font-family: 'Lato', sans-serif; } nav{ float: none; clear: both; width: 30%; margin: 10% auto; background: #eee; } nav ul { list-style: none; margin: 0px; padding: 0px; } nav li{ float: none; width: 100%; } nav li a{ display: block; width: 100%; padding: 20px; border-left: 5px solid; position: relative; z-index: 2; text-decoration: none; color: #444; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav li a:hover{ border-bottom: 0px; color: #fff;text-decoration:none;} nav li:first-child a{ border-left: 10px solid #3498db; } nav li:nth-child(2) a{ border-left: 10px solid #ffd071; } nav li:nth-child(3) a{ border-left: 10px solid #f0776c; } nav li:last-child a{ border-left: 10px solid #1abc9c; } nav li a:after { content: ""; height: 100%; left: 0; top: 0; width: 0px; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: -1; } nav li a:hover:after{ width: 100%; } nav li:first-child a:after{ background: #3498db; } nav li:nth-child(2) a:after{ background: #ffd071; } nav li:nth-child(3) a:after{ background: #f0776c; } nav li:last-child a:after{ background: #1abc9c; }