href无法在Firefox和Opera中使用

Question

我正在使用Css3效果使我的菜单看起来更漂亮，但没有问题，我不知道由于一些奇怪的原因，当我点击菜单项时，他们不会重定向到所需的页面，即我的href =“abc。 aspx“不适用于Firefox，Opera，但在Chrome中运行良好。这是我使用的Css3代码

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: ' ';
    position:absolute;
    z-index:-1;
    width:0px;
    height:0px;
    left:50%;
    top:50%;
    border-radius:50%;
    box-shadow:0 0 35px 30px #ADD7E7;

}

我的菜单看起来像

然而，当我删除那个Css3样式时，href工作。任何人都可以帮我解决这个问题的原因。 欢迎任何建议。

由于

Answer 1

很可能是因为你的css中的这一行：

z-index:-1;

默认图层是文档的0，但由于在悬停时您将其设置为-1，您将无法点击它。

Answer 2

问题可能源于样式#Menu a:active和伪元素。尝试将它们分开，甚至只从定义中删除#Menu a:active。然后，您可以将z-index设置回-1，因为它只会应用于伪元素。

我已经设置了jsfiddle here。

Answer 3

z-index:-1将元素放在身体后面。因此，它不能被点击，因为身体遮挡了它。

如果你没有为身体定义背景颜色，这有点模棱两可，因为透明背景颜色可能无法捕捉到点击。

避免负z-指数。在正数中，它们可以达到你想要的最高值，然后更可靠，然后是负数。