Bootstrap dropdowns menus appearing behind other elements - IE7

Question

I'm using Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

So I'm using their 'dropdown-menu' class to create some simple quick use dropdown menus, but for some reason on IE7 they are appearing behind text and other elements on my site.

Test Link: http://leongaban.com/_projects/defakto/CDS/

I added z-index to my CSS, but still doesn't seem to do anything, please help!

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9, Chrome, FF and other modern no headache browsers: enter image description here

IE7 >:(
enter image description here

HTML

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
        </ul>
    </li>

    <!-- User Dropdown Button -->
    <li id="account-btn">
        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/>
        <!-- <span class="grey_triangle"></span> -->

        <!-- User Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>

Could you try `$('.dropdown-menu').appendTo($("body"));`? If it's not going to work you can try another class instead .dropdown-menu but it is going to fix the issue, I guess. — Ömer Faruk Almalı, Apr 22 '13 at 16:22
Hmm just tried both those options, the jquery didn't do anything (but break the non-IE7 dropdowns) and I renamed .dropdown-menu to .dropdown-menu1 and still same issue :( — Leon Gaban, Apr 22 '13 at 17:16
Does this answer your question? [How to make div go behind another div?](https://stackoverflow.com/questions/19561585/how-to-make-div-go-behind-another-div) — Liam, May 04 '22 at 12:22

score 93 · Accepted Answer · edited May 23 '17 at 10:31

93

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

edited May 23 '17 at 10:31

Community

1
1

answered Apr 22 '13 at 20:42

Blake Plumb

6,779
3
33
54

5

And thanks! I added position: relative; to some container divs and it fixed my problem :) IE7 & 8 can't die fast enough... – Leon Gaban Apr 22 '13 at 22:23
Thanks, had the same problem with Safari on IOS6. – Rocklan Nov 10 '14 at 23:39
1

Thanks for the clue: Stacking. If two elements are overlapping, put relative position on their parent. – Juni Brosas Oct 12 '16 at 07:29
1

I have that problem too, but I use both position and z-index and it still doesn't work – TheCrazyProfessor Mar 17 '17 at 13:41
I added **style={{ zIndex:1020,position:'relative'}}** to the Immediate parent (CardHeader in my case) of my **React Material UI button** that triggers the Popper – Geek Guy Oct 24 '19 at 07:38

Adrift · Answer 2 · 2014-03-29T13:09:27.567

27

You can only use z-index on positioned elements (relative, fixed/absolute), so try adding:

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    position: relative;
    z-index: 10000;
}

edited Mar 29 '14 at 13:09

answered Apr 22 '13 at 20:23

Adrift

58,167
12
92
90

el3ati2 · Answer 3 · 2021-02-06T02:20:15.510

18

If increasing the z-index of the parent element(as mentioned in other answers) did not work for you, it could be that one of the parent elements has the following property:

overflow: hidden;

Try changing it to:

overflow: visible;

and see if it works.

edited Feb 06 '21 at 02:20

answered Jul 06 '17 at 23:46

el3ati2

475
3
11

3

Oh man, I was stuck with this for couple of hours and saw your answer. Thank you so much! – Bunyamin Coskuner Aug 14 '17 at 14:56

score 6 · Answer 4 · answered Oct 02 '17 at 07:15

6

Just make overflow as inherit or Visible.

it will solve the problem.

overflow: visible !important;

It worked for me awesomely

answered Oct 02 '17 at 07:15

Ronak Bokaria

616
6
6

score 2 · Answer 5 · answered Mar 17 '16 at 14:23

2

Check out the "append-to vs. append-to-body vs. inline example" on the newest version of UI-Bootstrap lib.

answered Mar 17 '16 at 14:23

tiago

195
1
7

score 1 · Answer 6 · answered Jan 24 '18 at 02:46

1

I had the same thing happen when using

overflow-x: hidden;

On the parent element. Had to turn it off.

answered Jan 24 '18 at 02:46

Joey Levy

99
7

score -1 · Answer 7 · edited Apr 10 '18 at 12:22

-1

it's resolved by adding in menu CSS.

position: relative;
z-index: 10000;

edited Apr 10 '18 at 12:22

Arun

1,933
2
28
46

answered Apr 10 '18 at 11:33

ganesh pandey

120
1
6

Bootstrap dropdowns menus appearing behind other elements - IE7

7 Answers7

Linked

Related