Использование спрайтов для горизонтальной навигации

Question

У меня есть следующий код, и я не уверен, почему, когда я работаю над первым navA, ничего не меняется, но я почти уверен, что это должно произойти, я в тупике.

HTML

<div id="access" role="navigation">
        <ul>
            <li id="navA"><a href="http://localhost:8888/fiftyfity/?page_id=2"></a></li>
            <li id="navB"><a href="http://localhost:8888/fiftyfity/?page_id=9"></a></li>
            <li id="navC"><a href="http://localhost:8888/fiftyfity/?page_id=11"></a></li>
            <li id="navD"><a href="http://localhost:8888/fiftyfity/?page_id=13"></a></li>
        </ul>
    </div><!-- #access -->

CSS

#access {
    background-image: url("../images/mainNav.gif");
    width: 521px;
    height: 49px;
    margin: 0;
    padding: 0;
}

#access li, #access a {
    height: 49px;
    display: block;
}

#access li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#navA { width: 98px; }
#navB { width: 131px; }
#navC { width: 123px; }
#navD { width: 138px; }

#navA a:hover { background-image: url("../images/mainNav.gif") 0px -49px no-repeat; }

Answer 1

Проблема с объявлением в селекторе #navA a:hover.Попробуйте это:

#navA a:hover 
{ 
    background: url("../images/mainNav.gif") no-repeat 0px -49px; 
}