Navigation verschiebt sich bei Popout Menü

F

FunkFlex

Mitglied
Hi, ich wollte mal fragen, was ich machen kann, wenn bei meiner vertikalen Pop Out Navigation, sich alle anderen Navigationspunkte jeweils um den Pop Out nach unten verschiebt. Also ich will diese Verschiebung unterbinden.

Gruß FunkFlex
 
Was verstehst du unter einem "Vertikalen Popout Menü"?

Prinzpiell sowas http://www.cssplay.co.uk/menus/concertina-slide.html?

Die Verschiebung der nachfolgenden Menüpunkte sollte sich unterbinden lassen, indem die Untermenüebenen mittels position:absolute aus dem normalen Texfluß genommen, und auf diese Weise über die übrigen Menüpunkte hinweg geöffnet werden.

Zusätzlich wäre für die Listeneinträge <li> position:relative vonnöten, damit sich die absolute Positionierung der Untermenüs auf dieses Element, und nicht wie in der Voreinstellung auf das <body>-Element beziehen.
 
Prinzipiell ja nur dass das Untermenü nach rechts aufklappt.
So ich habs probiert, nur wenn ich das Untermenü auf position:absolute setze, dann werden alle Navigationspunkte des untermenüs übereinander gelegt und ich seh nur noch einen Navigationspunkt anstatt X - Punkte.......
 
FunkFlex hat gesagt.:
Prinzipiell ja nur dass das Untermenü nach rechts aufklappt.
Zum Vergrößern anklicken....
Also eher http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html, wo beim Einblenden der Untermenüs die nachfolgenden Menüpunkte nicht nach unten verschoben werden.

FunkFlex hat gesagt.:
So ich habs probiert, nur wenn ich das Untermenü auf position:absolute setze, dann werden alle Navigationspunkte des untermenüs übereinander gelegt und ich seh nur noch einen Navigationspunkt anstatt X - Punkte.......
Zum Vergrößern anklicken....

Kann ich nicht nachvollziehen, denn im obigen Beispiel sitzen die Untermenüpunkte auch nicht übereinander, trotz der angesprochenen position:absolute-Regel für das <ul>-Element ab der zweiten Menüebene (Untermenüs).

Da scheint dann wohl grundsätzlich mit deinem Quellcode (HTML + CSS) etwas nicht zu stimmen, wenn zum einen beim Einblenden der Submenüs die Menüpunkte nach unten verschoben werden, und zum anderen durch die empfohlene Ergänzung für das <ul>-Element (Untermenü) und <li>-Element (Hauptmenüpunkte) deine Untermenüpunkte nicht mehr unter-, sondern plötzlich übereinander erscheinen.
 
Zuletzt bearbeitet:
Also ich poste mal den CSS-Code, find den Fehler einfach net....

ul#navigation {
margin:0;
padding:0;
margin-top: -620px;
margin-left: 15px;
text-align:center;
text-decoration:none;
position:relative;
}

ul#navigation li {
list-style:none;
margin:0;
padding:0;
text-decoration:none;
position:relative;
width: 120px;

}
ul#navigation li ul {
margin:0;
padding:0;
display:none;
text-decoration:none;
position:absolute;
}

ul#navigation li:hover ul {
display:block;
float:left;


}

ul#navigation li ul li {
float:none;
display:block;
position:absolute


}
ul#navigation li ul li a{
background-color:#FFF;
text-decoration: none;
color:#000;
text-decoration:none;
position:relative;

}

ul#navigation li ul li a:hover{
background-color:#000;
color:#FFF;
text-decoration: none;
}

ul#navigation a, ul#navigation span {
display:block;
width:120px;
text-decoration:none; font-weight: bold;
font-size:12px;
color:#fff;
position:relative;
}
ul#navigation a:hover, ul#navigation span:hover {
display:block;
width:120px;
padding:0;
text-decoration:none;
font-weight:bold;
color:#000;
background-color:#FFF;
}
Hoffe ihr könnt mir helfen

Gruß FunkFlex
 
Der Grund / Fehler, dass die Links des Untermenüs bei dir nun plötzlich übereinander liegen, und nicht mehr untereinander erscheinen, findet sich in deiner CSS-Regel position:absolute für das <li>-Element der Untermenüebene.

CSS: 
ul#navigation li ul li {
float:none;
display:block;
position:absolute


}

Hier war von meiner Seite jedoch ausschließlich von dessen übergeordneten <ul>-Elternlement die Rede, das in der HTML-Listenstruktur den Beginn und das Ende des Untermenüs auszeichnet.

Wäre übrigens von dir entgegenkommend, zukünftig die Highlight-Tags für deine Code-Präsentationen zu nutzen, die sie vom übrigen Beitragstext "abgrenzen", und uns das Lesen ungemein erleichtern. Danke!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück