Resizable nav bar

Question

I'm pretty new to html + css. I'm currently trying to make a website nav bar. I've got it to show and the buttons to work to an extent, now my only issue is I would like the image to re-size with the browser window.

I have used the technique which has 1 image with both the normal Nav Bar ontop and the mouse over nav bar buttons underneath, so normally the image shows the top half but when hovered over it displays a certain section of the bottom half. In the coding I have used, it is all pixel specific to quote the locations and sizes of each button and how much to show.

What I want this navbar to do is to be re-sizable depending on the browser to an extent. So if showed in a smaller window the image will re-size and vice versa. I have tried changing the px to %'s without avail. Is there a simple way round this?

You can check out the full website here: www.step-down.co.uk

ul#navbar li a {
display: block; float: left; height: 104px;
background-image: url(li1.png); text-indent: -9999px; position:relative; top:50px; right:10px;

}

ul#navbar li a.news {
    width: 172px; background-position: 0px 0;
}

ul#navbar li a.newr {
    width: 338px; background-position: -172px 0;
}
ul#navbar li a.hype {
    width: 170px; background-position: -510px 0;
}

ul#navbar li a.reviews {
    width: 205px; background-position: -680px 0; 
}
ul#navbar li a.bands {
    width: 195px; background-position: -885px 0;
}



ul#navbar li a.contact {
    width: 214px; background-position: -1080px 0;
}




    ul#navbar li a.news:hover {
    background-position: 0px -114px;
}

    ul#navbar li a.newr:hover {
    background-position: -172px -114px;
}
    ul#navbar li a.hype:hover {
    background-position: -510px -114px;
}

    ul#navbar li a.reviews:hover {
    background-position: -680px -114px;
}
    ul#navbar li a.bands:hover {
    background-position: -885px -114px;
}
    ul#navbar li a.contact:hover {
    background-position: -1080px -114px
}

Answer 1

For all of the Nav-Bar properties make them '%' of the entire screen, this way they will be re sized to what you need.