Question

I have a simple menu:

<ul id="menu2">
    <li> <a href="index.php?id=home">Home</a></li>
    <li> <a href="index.php?id=about">About us</a></li>
    <li> <a href="index.php?id=contacts">Contacts</a></li>
</ul>

And in css file I have:

#menu2 {
    background: black;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 220px;
}
#menu2 li {
    margin: 0;
    padding: 0;
}
#menu2 a {
    background: black;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 9px 16px;
    text-decoration: none;
}

#menu2 a:hover {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

#menu2 a:active {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

Everything works well except for #menu2 a:active not working at all while #menu2 a:hover (with same rules) works well. What is the problem? Did I miss something?

Answer 1

Can you provide more details of what exactly is not working and/or a demo. Looking at the code it appears to be fine.

The :active state refers to when a link is pressed, so if you press and hold your mouse button down on your menu item it should be working as expected since hover works active has the same properties.

A link with :active will not remain that way when your on the page it links too, it reverts back to a normal link.