Question

can anyone help me find out what the problem is? I’m trying to make the active state of the css sprite work.

At the moment, it is not doing anything

HTML

<ul id="nav">
    <li id="Contact"><a href="contact.html">Contact</a></li>
    <li id="Manual"><a href="manual.html">Manual</a></li>
    <li id="FAQ"><a href="faq.html">FAQ</a></li>
</ul>

CSS

#nav {
    background:url("../img/nav_final.png") no-repeat;
    width: 372px;
    height: 47.5px;
    margin: 70px auto;
    margin-bottom:25px;
    padding: 0;
}

#nav li, #nav a {
    height: 47.5px;
    display: block;
}

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

#Contact { width: 120px; }
#Manual { width: 140px; }
#FAQ { width: 112px; }

#Contact a:hover, #Contact a:active { background:url("../img/nav_final.png") 0px -47.5px no-repeat; }
#Manual a:hover,  #Manual a:active  { background:url("../img/nav_final.png") -118px -47.5px no-repeat; }
#FAQ a:hover,  #FAQ a:active  { background:url("../img/nav_final.png") -260px -47.5px no-repeat; }

Thanks for reading

Answer 1

The :active selector is when you have the mouse key pressed down. Not when you are at the actual link location.