html - 菜单栏 CSS 随链接变化

Question

我有一个基本的菜单栏，与 Logo 旁边的 SO 菜单栏不同(所以问题、标签等)。我有所有的样式，但是当我添加链接时它会改变。这很难解释，所以这是我的菜单栏样式:

div.menubar ul
{
background-color:#FF0000;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
div.menubar li
{
display:inline;
margin:0;
padding:0;
}
div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}
div.menubar a:link, div.menubar a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#FF0000;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}

还有菜单栏代码:

<div class = "menubar">
<ul>
<li><a href="home.php">Home</a></li><!--does not work-->
<li><a href="#news">News</a></li><!--works-->
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>

当链接 href 类似于 #home 时，链接背景会在鼠标悬停时变为绿色。但是，当链接 href 为 home.php 时，什么也没有发生。为什么会这样？

Answer 1

作为快速修复，将悬停状态移动到 CSS 的底部。

从长远来看，请查看 CSS 特性并确保您没有用更“重要”的东西覆盖您的悬停状态

在这里 fiddle :http://jsfiddle.net/mq7n3/

把这个移到底部

div.menubar a:hover, div.menubar a:active
{
background-color:#00FF00;//should highlight in green on mouseover
}