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;  
}  

[ChrisB]

Hi,

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;

Und damit ebenso „per se“ dein Menü unbenutzbar, wenn JavaScript nicht verfügbar ist.

ich denke allerdings, dass das Problem im CSS liegt.

Wenn du die Elemente im normalen Fluss belässt, verdrängen sie natürlich nachfolgende Elemente, sobald sie sichtbar gemacht werden.

Der mir nicht ganz so vertraute Befehl z-index hat das Problem leider nicht behoben.

Falsche Baustelle.

Wie es richtig geht, erklärt dir http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

MfG ChrisB