html - 使用 :before 悬停内联菜单

Question

我正在尝试为我的所有内联菜单制作默认悬停效果，但悬停效果并未覆盖整个“li a”元素。我在下面放了代码来说明问题。 http://jsfiddle.net/yWqK4/

Answer 1

您正在将<a>标签修改为block显示并执行所有其他类型的不必要的事情。

您唯一需要做的就是更改元素的背景颜色。将用于悬停效果的 CSS 替换为：

.Menu li a:hover {
    background-color: rgba(0,0,0,0.3);
}

它按预期工作。见http://jsfiddle.net/muNFY/

Answer 2

您无需使用:before即可获得理想的结果。固定游览风格在这里http://jsfiddle.net/yWqK4/2/