Well, I think absolute positioning is always connected with some z-indexing, I suppose some internal browser indexing does something here. I am not sure I understand what the problem is with negative positioning for the content box. This way it works here in all my tests. The other way is to set the z-index for the menu selectors, wich will take longer. I don't know why you set negative indexing for the submenus (z-index:-1) but it should be the other way: content box should be behind, under the menu popup items, so all the ULs and LIs should be with greater z-index than the content box. And if you want the 3rd-level submenu to popup over the parent submenu, it should be with greater z-index than the parent etc... If the content box comes with z-index:1, the menu items should be 2 for the 1st level and 3 for the 3rd level, this way they will pop over the content and over their parent items... (I suppose I am explaining something you know here, but I just want to be sure we understand each other)
Now, Just turning the content zindex back to negative and turning the menu zindex back to positive, I got it working here. I couldn't find the problem, probably that's why I think there is no problem. This is the code as as right now here in the tests I made:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu_v40.html : Menu build with cssMenuGenerator Version 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Keep the http-equiv meta tag for IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- Link the CSS file here -->
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
behavior:url("csshover2.htc");
background-color:#C8C8C8;
text-align:center; /* horizontal centering for IE Win quirks */
}
#distance {
width:1px;
height:50%;
margin-bottom:-384px; /* half of container's height */
float:left;
}
#main_container {
margin:0 auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:768px;
width:1024px;
clear:left;
}
/*********** header *********************/
/**********************************************/
#header {
position:absolute;
top:0;
left:0;
width:1024px;
height:90px;
background-color:#FF0000;
}
/**********************************************/
/*********** menu_container *********************/
/**********************************************/
#menu_container {
position:absolute;
top:90px;
left:0px;
height:33px;
width:1024px;
background-color:#FFFF00;
}
/**********************************************/
/*********** menu *********************/
/* pull-down mainmenu css */
.mainmenu{
float: left;
width: 100%;
padding: 0;
}
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#FF0000;
background: #FFFF00;
padding: 0;
border: solid #FFFF00;
border-width: 1px 0;
margin: 0 0 1em 0;
}
.mainmenu a, .mainmenu a:visited {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #FF0000;
text-decoration: none;
padding: 1em 1em;
}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width:1%;
}
.mainmenu li {
float: left;
margin:0;
padding:0;
}
.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li a {white-space:nowrap;}
.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;
background: #FFFF00;
font-weight: normal;
border-width: 1px;
margin: 0;
}
.mainmenu li li {
width:15em ;
}
.mainmenu li li a{
width:13em ;
}
.mainmenu li ul {
margin: 0;
}
.mainmenu li ul ul {
margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: auto;
}
.mainmenu li:hover>ul.ul_ch
{
left: auto;
}
.mainmenu li:hover{
background: #FF0000;
}
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#FF0000;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #FF0000;
/*z-index:9999;*/
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #FFFF00;
}
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #FF0000;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #FF0000;
}
/* end of mainmenu css */
#content {
position:absolute;
top:123px;
left:0px;
height:440px;
width:1024px;
overflow:auto;
background-color:#FFFFFF;
z-index: -1;
}
/*********** footer ******************/
/**********************************************/
#footer {
position:absolute;
top:563px;
left:0px;
height:205px;
width:1024px;
background-color:#FF0000;
}
/**********************************************/
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>
<body>
<div id="distance"></div>
<div id="main_container">
<div id="header">
<br>
header
<br>
</div>
<div id="menu_container">
<div div class="mainmenu">
<ul>
<li class="li_nc"><a href="/" target="_self" >Home</a></li>
<li class="li_hc"><a href="#" target="_self" >Information</a><ul class="ul_ch">
<li class="li_nc"><a href="#" >Geschichte</a></li>
<li class="li_hc"><a href="#" target="_self" >Besucherinfo</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Eintritt/Oeffnungszeiten</a></li>
<li class="li_nc"><a href="#" target="_self" >Anfahrt/Parken</a></li>
<li class="li_nc"><a href="#" target="_self" >Fuehrungen</a></li>
<li class="li_nc"><a href="#" target="_self" >Bibliothek</a></li>
</ul></li>
<li class="li_nc"><a href="#" target="_self" >Presse</a></li>
<li class="li_nc"><a href="#" target="_self" >Team</a></li>
<li class="li_nc"><a href="#" >Museumsshop</a></li>
<li class="li_nc"><a href="#" >Museumscafe</a></li>
</ul></li>
<li class="li_hc"><a href="#" >Ausstellungen</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Aktuell</a></li>
<li class="li_nc"><a href="#" target="_self" >Kunsthalle Barmen</a></li>
<li class="li_nc"><a href="#" target="_self" >Vorschau</a></li>
<li class="li_nc"><a href="#" target="_self" >Archiv</a></li>
</ul></li>
<li class="li_hc"><a href="#" >Sammlung</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Bestand</a></li>
<li class="li_nc"><a href="#" target="_self" >Kuenstler</a></li>
</ul></li>
<li class="li_hc"><a href="#" >Kunstvermittlung</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Atelier</a></li>
<li class="li_nc"><a href="#" target="_self" >Kinder Jugendliche</a></li>
<li class="li_nc"><a href="#" target="_self" >Erwachsene</a></li>
<li class="li_nc"><a href="#" target="_self" >Veranstaltungen</a></li>
<li class="li_hc"><a href="#" >Publikationen</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Kataloge</a></li>
<li class="li_nc"><a href="#" target="_self" >Newsletter</a></li>
</ul></li>
</ul></li>
<li class="li_hc"><a href="#" >Partnerschaften</a><ul class="ul_ch">
<li class="li_nc"><a href="#" target="_self" >Kunst+Museumsverein</a></li>
<li class="li_nc"><a href="#" target="_self" >Foerderer</a></li>
</ul></li>
</ul>
<!-- End Menu -->
</div>
<!--End menu_container -->
</div>
<div id="content">
<!-- This changes seems to be a good way, but it causes some other troubles with the menu ...
<div id="content" style="z-index:-9999991;">
<div id="content" style="z-index:-1;">
-->
<br>
content
<br>
</div>
<div id="footer">
<br>
footer
<br>
</div>
<!--End main_container -->
</div>
</body>
</html>
The only other idea that I have right now is to avoid absolute positioning at all (in fact, I hate absolute positioning and always work with relative, but that's my way) I suppose this could fix the page, but it sounds hard to rebuild everything. Just please, explain me what doesn't work with the z-index fixed, because I don't see the trouble...
