CSS Dropdown Menu Hidden Behind Content Ie7

CSS Dropdown menu hidden behind content IE7

The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.

You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.

Try this:

#nav li {
    display: block;
    position: relative;
    z-index: 1;         // force IE to recognize stack at this point
}

Bootstrap dropdowns menus appearing behind other elements - IE7

Its a stacking context issue!

Even though you are using z-index on the dropdown, it is only relative to elements in the same stacking context. You need to add a z-index and a position to a parent element in order to get this to work. In this case I would recommend the header-top div

Dropdown menus not being displayed in IE (hidden behind content)

Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.

The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.

http://jsfiddle.net/uTBZN/30/

Credit to:

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

Dropdown nav bar hiding behind content in IE7

Add this to your $(document).ready() handler:

var zi = 1000;
$('*').each( function() {
    $(this).css('zIndex', zi);
    zi -= 10;
});

In order to make sure this is only executed on IE7, add this outside your <script> tags, but in <head>:

<!--[if IE 7]>
<script type="text/javascript">
    $(document).ready(function() {
        var zi = 1000;
        $('*').each( function() {
            $(this).css('zIndex', zi);
             zi -= 10;
        });
    });
</script>
<![endif]-->

Dropdown nav bar hiding behind content in IE7

Add this to your $(document).ready() handler:

var zi = 1000;
$('*').each( function() {
    $(this).css('zIndex', zi);
    zi -= 10;
});

In order to make sure this is only executed on IE7, add this outside your <script> tags, but in <head>:

<!--[if IE 7]>
<script type="text/javascript">
    $(document).ready(function() {
        var zi = 1000;
        $('*').each( function() {
            $(this).css('zIndex', zi);
             zi -= 10;
        });
    });
</script>
<![endif]-->

dropdown hidden behind divs in IE7

Try adding:

#header {
    position: relative;
    z-index: 1;
}

For IE, the entire block has to have a higher z-index than the block below it.

IE7 dropdown menu appears behind image

Quoting from this thread

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: apparently IE interprets this as a new stacking context.

UPDATE-

Add the following css to you page

#header
{
    position:relative;
    z-index: 2;
}
#content-wrap
{
    position:relative;
}

CSS drop-down menu explosion in Internet Explorer 7

Overall, your issue is that the CSS you are using is more advanced than some of the browsers you need to support. Rounded corners and most pseudo elements have spotty support in older browsers.

I noticed that your arrow is missing in IE7, that was my clue. IE7 does not support the pseudo-class element :after. Here is a helpful reference page to check on browser support of certain CSS http://kimblim.dk/css-tests/selectors/.

Quirksmode.org is a good resource for compatibility. Here is there page specific to :after http://www.quirksmode.org/css/beforeafter.html

Bootstrap navbar dropdown hidden behind grid content

You have to set a position on .headercontainer for z-index to work. Just add these rules to the class.

position: relative;
z-index: 1;

CSS Dropdown Menu Hidden Behind Content Ie7