Why CSS making links non-clickable in Firefox?

I'm checking in Firefox 3.6

Why 2nd level links are not clickable in this tab menu.

alt t开发者_开发技巧ext http://shup.com/Shup/383239/11061405615-My-Desktop.png

live example here : http://jsbin.com/upeka4/5

these are clickable if disable the css

---

Probably because the z-index definition here:

ul.level2  {
background:none repeat scroll 0 0 #F3F8C6;
border:1px solid #EABF4A;
left:0;
padding:6px;
position:absolute;
top:30px;
width:463px;
z-index:-1; <------------------------ there
}

---

Your z-index: -1 is the problem

---

change the z-index for the ul.level2 from -1 and you should be good to go. IE will still allow them to be clicked but firefox doesn't usually allow it if there's an element on top of them.

---

Others above have explained the problem. For a solution, just do:

#tabcontainer
        {
          height:32px;
          position:absolute;
          margin: 2em;
          font-size: 12px;
        }

Reducing the height to 32px causes the secondary links list to "overflow" out of the tabcontainer and therefore is not covered by it (though it's still displayed "below" it according to the z-index). position:absolute; causes the secondary links to only be positioned below the tabcontainer, not below any parent elements (like html, body).