Horizontale Navigation auf mehreren Ebenen - Content verschoben

[Wonderless]

Guten Tag,
ich versuche eine horizontale Navigation mit mehreren Ebenen zu realisieren, wie unter folgendem Link zu finden. Allerdings habe ich, wie sichtbar, das Problem, dass sich der Textbereich verschiebt, wenn die unteren Ebenen aufklappen. Das MouseOver per se ist mit Javascript geregelt; ich denke allerdings, dass das Problem im CSS liegt. Der mir nicht ganz so vertraute Befehl z-index hat das Problem leider nicht behoben.

Mein CSS:

html {  
        background: #f1f1f1;  
}  
  
body {  
        font: 10pt georgia;  
        color: #8f8f8f;  
        position: relative;  
        width: 800px;  
        left: auto;  
        right: auto;  
        margin: auto;  
        padding: 5px;  
  
}  
  
  
/* --- SPECIAL DIVS --- */  
/* header (logo, aktuell), navigation, content, footer */  
  
  
container {  
        background: #ff0000;  
        padding: 0px;  
        position: absolute;  
}  
  
#head {  
         background: url(head.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
}  
  
#header {  
         background: url(content.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
}  
  
#aktuell {  
         background: #ebebeb;  
         width: 40%;  
         height: 120px;  
         margin-right: 40px;  
         padding: 5px;  
         float: right;  
  
         border:1px solid #ebebeb;  
         -moz-border-radius:10px;  
         -khtml-border-radius:10px;  
  
}  
  
#navigation {  
         background: url(content.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
         z-index: 2;  
}  
  
#content {  
         background: url(content.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
         z-index: 1;  
}  
  
#footer {  
         background: url(footer.png) no-repeat;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
}  
  
/* --- NAVIGATION --- */  
  
.bereich{  
display: block;  
color: #FFFFFF;  
background-color: #000000;  
text-align: center;  
z-index: 3;  
}  
  
a.link{  
display: block;  
color: #FFD700;  
font-family: Verdana, Arial;  
font-size: 13px;  
text-decoration: None;  
border-bottom: solid 1px #FFFFFF;  
z-index: 3;  
}  
  
a.link.bereich{  
display: block;  
background-color: #000000;  
width: 100px;  
height: 25px;  
z-index: 3;  
  
}  
  
a.link:hover{  
display: block;  
color: #000000;  
background-color: #FFD700;  
z-index: 3;  
}