0

http://jsfiddle.net/qS47B/6/

I am having troubles with z-index and ie. The dropdown menu appears under the other menus. Does anyone have any recommendations on how to get ie to acknowledge a z-index?

The dropdown menus are in tables...

<table>
<tr>
<td>
<ul class="dropdown">
    <li>View &#x25BC;
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>

    </li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="dropdown">
    <li>View &#x25BC;
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>

    </li>
</ul>
</td>
</tr>
</table>

The css:

td{ padding:5px; border: 1px solid #aaa; }
ul.dropdown { height: 20px; position: relative; margin:10px;}

ul.dropdown > li { color:#222; background:#aaa;  padding:5px; width:200px}

ul.dropdown > li:hover { color:#ddd; background:#403838; }
ul.dropdown li ul { display:none; position:absolute; z-index:100; left: 0; top:25px; }
ul.dropdown li ul li { }
ul.dropdown li ul li a { width:200px; display:block; padding:1px 5px; color:#fff; background:#444; border-top:1px solid #666; }
ul.dropdown li ul li a:hover { color:#fff; background:#888; }

The jQuery:

$('.dropdown').hover(
  function() {
    $('ul', this).stop(true, true).slideToggle(100); },
  function() {
    $('ul', this).stop(true, true).slideToggle(100); }
);
superUntitled
  • 22,351
  • 30
  • 83
  • 110

3 Answers3

2

UPDATED, You need to add z-index to the parent container on hover. See here: http://jsfiddle.net/qS47B/12/.

Note the additional class ul.dropdown:hover { z-index:10;}

Syri
  • 671
  • 2
  • 5
  • 11
  • thanks for the update, it is still not rendering correctly for me (I am using IE8 with compatibility view on) – superUntitled May 13 '11 at 17:42
  • @super Testing via IE9 in all modes correctly renders the menu. I'll have a look via [spoon](http://spoon.net/browsers/) to see if I can see where the discrepancy is. – Syri May 13 '11 at 17:49
  • 1
    @super The above code is working, no matter the mode (In IE9 at least). Try adding the hover event to the parent td cell instead. – Syri May 13 '11 at 18:13
  • @Bjorn Aadnesgaard: Thanks for that last comment, it made my answer much cleaner. Adding `td:hover{position:relative; z-index: 1000}` fixes it. – thirtydot May 13 '11 at 18:29
0

Have you tried adding z-index:0 to ul.dropdown and ul.dropdown li?

IE7 Z-Index Layering Issues

Community
  • 1
  • 1
SickHippie
  • 1,382
  • 1
  • 8
  • 20
0

It's not really up to my usual standards of fixing this bug, but this works:

See: http://jsfiddle.net/qS47B/13/

<td style="position:relative; z-index:1000">

I really hope you only have two dropdowns, or you have to start doing this.

I guess you could use JavaScript to do it for you if required.

If you'd like some background information on this bug, see the comments I left on this question.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • this is exactly the fix i just tried. It worked. And yes, there are many more than two of these, on many pages. So I will be going the js route to set these indexes. thanks. – superUntitled May 13 '11 at 18:25
  • Actually, @Bjorn Aadnesgaard in his last comment on his answer (+1) has provided a better way to do my fix: Do it on `td:hover`. See: http://jsbin.com/ifego4/3 – thirtydot May 13 '11 at 18:27