Html 如何排除活动LI（菜单）的悬停？

我已经用CSS创建了一个导航菜单。如果项目LI处于活动状态，如何防止其悬停

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:

-

class=active不允许悬停。

选择它：

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

注意，我已经添加了a.active:hover，但是注意在这里覆盖了它。看一个例子，你可能想用，也可能不想用，在这个例子中，我把一个比另一个更不具体；我已从：悬停选择器中删除了li。

退出选择它：

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

注意，我已经添加了a.active:hover，但是注意在这里覆盖了它。看一个例子，你可能想用，也可能不想用，在这个例子中，我把一个比另一个更不具体；我已从：悬停选择器中删除li