z-index issue in firefox 5, chrome

I am in the process of doing css fixes for IE6 and 7 and I ran across some z-index issues. No big deal, I just went through them one at a time. Well in trying to fix them, I've uncovered a bigger z-index issue in firefox and chrome. I have a link in the header that when clicked triggers a dropdown to slide down. The problem is that it drops down behind the navigation area just below the header.

Here is the css for the dropdown and the nav:

#topNav{
    width:100%;
    height:50px;
    line-height:50px;
    z-index:1;
    position:relative;
}

#minicart{
    position:relative;
    width:355px;
    height:auto;
    z-index:1000;
    background-color:#fff;
    top:0px;
    right:0px;
    float:right;
    -moz-border-radius:3px;
    border-radius:3px;
    border:1px solid #000;
    -moz-box-shadow:0 0 10px 0 #666;
    -webkit-box-shadow:0 0 10px 0 #666;
    box-shadow:0 0 10px 0 #666;
    behavior:url(http://192.168.1.104/magento/skin/frontend/asi/default/assets/PIE.htc);
    color:#000; 
    z-index:9999;
}

So you can 开发者_JAVA技巧see that #minicart z-index is way higher than #topNav. What I can't figure out is why #topNav is on top even though the z-index is smaller.

Any suggestions?

Chances are, your #minicart has an ancestor that forms a new stacking context (e.g. has a non-auto z-index or has a CSS transform applied or has opacity not equal to 1) and is z-ordered below the #topNav. It's hard to say more than that without seeing the actual page.

At first, remove one of the two z-index you have at the same element.

Then make some troubleshooting in the hard work way. Take away (comment out) all code lines and leave only the z-index along with some way of making them visual, like background-color.

If this works, add one line at a time and test it.

If it doesn't work, there is something else wrong on your page.