活动元素的 CSS 样式修复

Question

首先我是 CSS 新手，似乎不了解类如何与 id 交互，这就是为什么我无法使用以下菜单。

<div id="navmenu">
  <ul> 
    <li><a href="#">Home</a></li>
    <li><a href="index.php?=1">Menu2</a></li>
    <li><a href="index.php?=2">Menu3</a></li>  
  </ul> 
</div>

这是我的 CSS：

#navmenu ul {
 margin: 0; 
 padding: 0;
 list-style-type: none; 
 list-style-image: none; 
}

#navmenu li {
 width:114px;
 text-align:center;
 float:left;
}

#navmenu ul li a {
 text-decoration:none;
 color: white;
 background: #CE140B;
}

#navmenu a {
 padding-top:4px;
 padding-bottom:4px;
 display:block;
 width:100%;
}

#navmenu ul li a:hover {
 color: #CE140B;
 background: white; 
}

当鼠标悬停在菜单项上时，这会改变背景和前景色。

现在我想为此添加一个活动类，这样当我在主页上时，主页菜单项看起来与悬停时相同。以下代码不起作用。

我已尝试将菜单更改为：

<li><a class="active" href="#">Home</a></li>

还有

<li class="active"><a href="#">Home</a></li>

和我的 CSS 到：

#navmenu ul li a:hover a:active {
 color: #CE140B;
 background: white; 
}

和

#navmenu ul li a:hover li:active {
 color: #CE140B;
 background: white; 
}

两者都不起作用。感谢您帮助完成这项工作。

Answer 1

要么

li.active:hover {

}

或者

a.active:hover {

}

应该有效