在我的情况下，li活跃的css bug

Question

我认为这不是错误，只是因为我对css并不擅长。看看为什么active的边界与悬停状态不同：

http://jsfiddle.net/Mb398/1/

<ul class="menu">
  <li class="active"><a href="#">Sign up</a></li>
  <li><a href="#">Login In</a></li>
</ul>

Answer 1

.active位于<li>，但随后在您的CSS中设置了：<a>上的悬停样式。

删除“li a：hover”并将其替换为“li：hover”，您将获得正确的结果。

This is a fiddle of it

Answer 2

您正在选择具有不同尺寸的两个不同元素。 .active是父li，略大于您使用<a>选择的:hover。由于li较大，其边界将更长并略低。 <{1}}默认为蓝色，因此边框为蓝色。

<强>解决方案

第1步：

您需要更改

的每个实例

<a>

到

border: 5px solid;

这将解决着色问题。

第2步：

然后改变

border: 5px solid black;

到

.menu li.active {

这将解决尺寸问题。

这是一个有效的fiddle。