Somehow my color on the selected tab doesnt change when I click on any tabs? any suggestions?

Question

I am pasting my code bellow, Please help me ASAP ( It was suppose to change the color of selected tab to white, but somehow it does not do that) I do not know what the problem is now, please help me!!!!

CSS code:

#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,200,0.5);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 18px;
}
#navigation a:hover {
background: #ddd;
}

HTML CODE:

<div id="header">
      <ul id="navigation">
      <li><a id="link-home" href="index.html">Home</a></li>
      <li><a id="link-portfolio" href="portfolio.html">Portfolio</a></li>
      <li><a id="link-contact" href="contact.html">Contact</a></li>
          </ul>
</div>

Answer 1

Try this:

<style>
#navigation li.selected a {
    background:#fff;
}
</style>
<li class="selected"><a id="link-home" href="index.html">Home</a></li>