Home/ Questions/Q 1058615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T18:03:04+00:00

I have a layout based on absolute positioning and a CSS-based menu in the

  • 0

I have a layout based on absolute positioning and a CSS-based menu in the header area. Everything works fine in Firefox, but in Internet Explorer 7 and 8, the menu dropdowns are covered by the content area. IE simply does not honour the z-index property in this case.

I read about stacking contexts and the z-index bug, but still could not get it to work. Is there some way to fix it without dropping the position:absolute on #content? I can change the positioning method used for the navigation area, though.

Here’s the simplified code:

<!DOCTYPE html>
<html>
<head>
<style>
#nav {margin:0; padding: 0; position: absolute; left: 0; top: 0; right: 0; height: 2em; background: #eee}
#nav > li {float: left; list-style: none; position: relative; }
#nav > li > a {display: block; position: relative; margin: 0; background-color: #eee; padding: 5px; border: 1px solid #eee; text-decoration: none; color: #444;}
#nav > li:hover > a { background-color: #ddd; }

#nav li ul { z-index: 1; display: none; position: absolute; padding: 0; margin: 0; list-style: none; border: 1px solid black; background: #eee; width: 100px; }
#nav li:hover ul {display: inline;}
#nav li ul li {list-style: none; margin: 0; padding: 0; height: 5em; }
#nav li ul li a {display: block; padding: 5px; margin: 0; color: #444; text-decoration: none; white-space: nowrap;}

#content { position: absolute; top: 3em; left: 0; right: 0; bottom: 0; background: #ccc; }
</style>
</head>
<body>

<ul id="nav">
    <li><a href="#">A</a><ul><li>...</li></ul></li>
    <li><a href="#">Group B</a><ul><li>...</li></ul></li>
    <li><a href="#">The third group</a><ul><li>...</li></ul></li>
</ul>

<div id="content"></div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, never mind. Putting an explicit z-index on #nav and #content (2 and 1, respectively) did the trick. Note that the z-index on #nav li ul in the code above is not required.

    • 0