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 {

}

应该工作

CSS样式修复了活动元素

1 个答案: