Can't change color of link in footer

Question

I can't get why, but suddenly some css broke and I was needed to change them again.

So now my problem is that I can't change color of links, I can change link:hover, but color of link - not.

Can someone suggest what could caused this problem and help me ?

It looks grey in my screen.

Here is my css code:

    footer { 
     height:20px;
    background: #628d28;
    margin-top: 45px;    
    padding-top: 5px;
    border-top: 1px solid #eaeaea;
    a {
    color: white;
    background: #628d28;
    &:hover { 
    background: #628d28;
     }
  }  
  small { 
   float: left; 
   }
   ul {
   float: right;
  list-style: none;
   li {
  float: left;
  margin-left: 10px;
    }
   }
  }

Code in my view:

 <footer class="footer">
   <nav>
     <ul>
      <li><%= link_to "Privacy policy", privacy_policy_path %></li>
      <li><%= link_to "Terms of use", terms_of_use_path %>
     </ul>
   </nav>
 </footer>

Answer 1

Your CSS should be something like:

    #footer {       
    height:20px;     
    background-color: #628d28;     
    margin-top: 45px;         
    padding-top: 5px;     
    border-top: 1px solid #eaeaea;     
}

#footer ul {
float: right;   
list-style: none;
}

#footer li {
float: left;   
margin-left: 10px;
}

#footer ul a{
color: white;     
background: #628d28;
}

#footer ul a:hover {     
background: #628d28; 
}

And your HTML:

> <div id="footer"> <nav> <ul> <li><a href="#">Testa</a></li> <li><a
> href="#">Test</a></li> </ul> </nav> </div>

Answer 2

May be it helps you: jsfiddle.

Everything is working. Link color changes. Perhaps you have a problem in other parts of the code.