href not working in Firefox and opera

问题:

I am using Css3 effects to make my menu look fancier , no issues with that however , I dont know for some strange reasons , when I click on the menu items , they dont redirect to desired pages ie my href="abc.aspx" wont work in Firefox , Opera , but works well in Chrome.Here is the Css3 code which I use

#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;

}

My menu looks something

However when I remove that Css3 styling , the href works.Can anybody help me out with this as to why this happens. Any suggestions are welcome.

Thanks

回答1:

The problem may stem from styling #Menu a:active together with the pseudo elements. Try separating them or even just remove #Menu a:active from the definition altogether. Then you can set your z-index back to -1 as it will only be being applied to the pseudo element.

I've set up a jsfiddle here.

回答2:

It is most likely because of this line in your css:

z-index:-1;

The default layer is 0 of the document but since on hover you are setting it to -1, you won't be able to click on it.

回答3:

The z-index:-1 places the element behind the body. As such, it can't be clicked because the body is obscuring it.

This is however a little ambiguous if you haven't defined a background colour for the body, as transparent background colours may not catch clicks.

Avoid negative z-indices. They can go pretty much as high as you want in the positive numbers, more reliably then negative.