Links in header design question

Hey guys, I was planning to add links in my header, and designing them is causing me a bit of a problem. I'm aiming on making one similar to that of twitter, but there are two problems I'm facing. First, when I change the background color of one link, it changes the color of the background just around the link, but I want it to change the background开发者_如何学Python of the link from the top of the header to the bottom of the header.(Refer to twitter to understand better) and also, how can I change the background color of just the link that is active? By active I mean that if the link links to homepage.php and the user is in homepage.php I want the link to have a different background color. Here's the code that I've come up with till now:

<div class="littleheader"><div class="logo"><a HREF="index.php"><img class="fleft" src="graphics/little-logo.png" alt="Cliproid" ></a></div>

<div class="navbuttons">
<div class="navigations">
<a class="nav">test</a>
</div>
<br/><br/>
</div>
</div>

and the styles:

    div.littleheader
    {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aadbba), to(#009933)); 
        background: -moz-linear-gradient(top, #aadbba, #009933); 
        padding: 0.5em;
        color: white;
        clear: left;
        z-index: 1;
        height: 30px;
        }   
     .logo
     {
        margin-left: 100px;
        vertical-align: middle;
        }
       div.navbuttons{
        float: left;
        text-align: left;
        margin-left: 50px;
        }
.fleft
{
    float: left;
    }
.navigations
{
    float: left;
    vertical-align: middle;
    margin-left: 10px;
    }   
a.nav
{
    vertical-align: middle;
    color: white;
    }

My first thought would be to change the a.nav:

a.nav {
  display: block;
  float: right;
  line-height: 120px;      /* just an example, line-height causes vertically aligned */
}

and take it from there.

You will have to float your whole navigation bar right and other stuff left, but this is the basic start.