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!