CSS，菜单 :active not working

Question

我有一个简单的菜单:

<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>

在 css 文件中我有:

#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;
}

除了 #menu2 a:active 根本不工作而 #menu2 a:hover(使用相同的规则)工作正常外，一切都很好。问题是什么？我错过了什么吗？

Answer 1

它按预期工作。我将事件状态涂成红色。
尝试单击 en 元素并按住按钮。背景将为红色。

您看不到任何变化，因为 hover 和 active 的 CSS 是相同的!

示例
http://jsfiddle.net/dqH3F/1/

样本包含

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