<a> style override not applied

Question

This is probably something about CSS specificity, but I can't see it. The first item of an unsorted list should be overridden by class "current-link" ("item 1" should be green) though it doesn't apply that style.

#navbar-top
    {
      position:absolute;
	  top: 50px;
	  left: 50px;	
	  width: 400px;
	  height: 50px;
    }

    #navbar-top ul li 
    {
	  float:left;								
      display: inline-block;
      font: bold 12px/12px sans-serif;
    }

    #navbar-top ul > li + li
    {
	  border-left: solid 1px #374659;
    }

    #navbar-top a 
    {
      /*display: block;*/
      padding: 2px 7px;
      border: 0px;
      margin: 0px;
      text-decoration: none;
      font-size: 14px;
      transition: 400ms ease;
    }

    /*
    Necessary link style order:
	1. a:link
	2. a:visited
	3. a:hover
	4. a:active
    */

    #navbar-top a:link
    {
	  color: #374659;							/*light grey*/
    }

    #navbar-top a:visited
    {
	  color: #374659;							/*light grey*/
    }

    #navbar-top a:hover
    {
      color: red;								/*Slowly fade from grey to red*/
    }

    #navbar-top a:active
    {
      color: yellow;						    /*Slowly fade from red to yellow*/
    }

    .current-link
    {
	  font-weight:bold;
	  color: green;	
    }

    <div id="navbar-top">
      <ul>				
        <li><a href="#" class="current-link">item 1</a></li>				
        <li><a href="#">item 2</a></li>          	
        <li><a href="#">item 3</a></li>    					
      </ul>
    </div>

Thank you!