Untitled

<ul class="nav">

  <li><a href="#"><i class="icon-chevron-right"></i>download</a></li>

  <li><a href="#">download</a></li>

  <li class="active"><a href="#">download</a></li>

  <li><a href="#">download</a></li>

  <li><a href="#">download</a></li>

  <li><a href="#">download</a></li>

</ul>

.nav {

  font-family: Arial, Helvetica, sans-serif;

  width: 300px;

  list-style: none; margin: 10px 0 0 10px; padding: 0;}

li { line-height: 40px;}

a {

  display: block;

  border: 1px solid #e5e5e5;

  margin: 0 0 -1px 0;

  color: #222;

  text-decoration: none;

  padding: 8px 14px;

}

a:hover {

  background: #eee;

}

.active > a, .active > a:hover {

  background: #eee;

  color: #dd4b39;

  font-weight: bold;

  padding: 8px 14px 8px 12px;

  border-left: 3px solid #dd4b39;

}

(function() {

  var links = document.getElementsByTagName('a');

  for (var i = 0; i < links.length; i++) {

    links[i].onclick = function() {

      this.parentNode.className = "active";

      this.parentNode.siblings.className = "";

    };

  }

}

)();