THE HTML:

<div id="navigation">
    <div id="home">
        <a href="#">&nbsp;</a>
    </div>
    <div id="aboutus">
        <a href="#">&nbsp;</a>
    </div>
    <div id="services">
        <a href="#">&nbsp;</a>
    </div>
    <div id="portfolio">
        <a href="#">&nbsp;</a>
    </div>
    <div id="contact">
        <a href="#">&nbsp;</a>
    </div>
    <div class="clear"></div>
</div>

THE CSS:

.clear {
    clear: both;
}

#navigation {
    height: 50px;
}

#home a, #aboutus a, #services a, #portfolio a, #contact a {
    background-repeat: no-repeat;
    float: left;
    height: 50px;
    text-decoration: none;
    width: 100px;
}

#home a {
    background-image: url('images/home.jpg');
}

#aboutus a {
    background-image: url('images/aboutus.jpg');
}
#services a {
    background-image: url('images/services.jpg');
}
#portfolio a {
    background-image: url('images/portfolio.jpg');
}
#contact a {
    background-image: url('images/contact.jpg');
}

#home a:hover, #aboutus a:hover, #services a:hover, #portfolio a:hover, #contact a:hover {
    background-position: 0px -49px;
}

#home a:active, #aboutus a:active, #services a:active, #portfolio a:active, #contact a:active {
    background-position: 0px -99px;
}