<div id="header-nav">
            <ul>
                <li><a class="home home-active" href="index.html">HOME</a></li>
                <li><a class="about" href="about.html">ABOUT</a></li>
                <li><a class="services" href="services.html">SERVICES</a></li>
                <li><a class="photos" href="photos.html">PHOTOS</a></li>
                <li><a class="quote" href="quote.html">QUOTE</a></li>
                <li><a class="contact" href="contact.html">CONTACT</a></li>
            </ul>
        </div>

.home { width: 120px; height: 191px; background: url(../images/home.png) no-repeat 100%; display: block; position: absolute; top: 0; left: 0; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; text-indent: -9999px; }

.home:hover { width: 120px; height: 191px; padding-top: 20px; background-image: url(../images/home-hover.png); }

.home-active { width: 120px; height: 191px; background-image: url(../images/home-hover.png); position: absolute; top: 0; left: 0px; padding-top: 0 !important; }