如何排除Hover for Active LI（菜单）？

Question

我在CSS中创建了一个导航菜单。如果某个项目（LI）为active，如何防止其悬停？

下面的CSS：

.page-header .menu li {
    float:left;
    display: inline;
    margin-right: 2px;
    line-height: 34px;
} 

.page-header .menu li a.active {
    background-color: white;
    font-weight: bold;
    color:black;
}

.page-header .menu li a:hover {
    background-color: red;
}

HTML：

    <ul class="menu">
        <li><a class="active" href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
    </ul> 

-

class="active"应该禁止悬停。

Answer 1

选择它：

.page-header .menu li a.active,
.page-header .menu li a.active:hover {
    background-color: white;
    font-weight: bold;
    color:black;
}

http://jsfiddle.net/userdude/RSwnP/

注意，我添加了a.active:hover，但注意selector specificity在此处覆盖了它。请参阅this fiddle以获取一个例子（您可能想也可能不想使用），其中我提出了一个“不太具体”的例子;我已从li选择器中删除了:hover。