✔ Vertikales ausklappbares Submenu

[fredolin]

Hallo CSS Gemeinde

ich glaub ich seh die Bäume im Wald nicht mehr. Habe hier mal eine Testseite erstellt, wo ich ein vertikales Menu mit submenu zum aufklappen unterhalt der einzelnen Menupunkte geschehen soll.

Bei mir klappt es immer danehben undschweben über ie anderen Menupunkite hin weg.


Die CSS Datei dafür

#navi ul {
	margin: 0 0 10px 2px;
	padding: 0;
	z-index: 10;
	
}
#navi ul a {
	position: relative;	
}
#navi ul li {
	display: block;
	width: 204px;
	height: 20px;
	margin: 2px 0;
	padding: 3px 3px;
	border: 1px solid #575757;
	background-color: #ABABAB;
	position: relative;		
}
#navi ul li ul {
	display: none;
	position: absolute;	
}
#navi ul li:hover ul {
	display: inline;
	position: absolute;
}
#navi ul li ul li {
	margin: 2px 0;
	padding: 3px 0;
	width: 148px;
	height: 18px;
	background-color: #D6D6D6;	
}
#navi ul li ul li:hover {
	background-color: #8C8C8C;	
}

Und der HTML Code

<!-- Navigation untereinander dargestellt //-->
                <div id="navi">
                	<h1>Navigation</h1>
                    <ul>
                        <li><a href="?act=home">Startseite</a></li>
                        <li><a href="?act=page1">Page1</a></li>
                        <li><a href="?act=page2">Page2</a>
                            <ul>
                                <li><a href="?act=page2?sub=submenu1">Submenu1</a></li>
                                <li><a href="?act=page2?sub=submenu2">Submenu2</a></li>
                                <li><a href="?act=page2?sub=submenu3">Submenu3</a></li>
                                <li><a href="?act=page2?sub=submenu4">Submenu4</a></li>
                                <li><a href="?act=page2?sub=submenu5">Submenu5</a></li>
                                <li><a href="?act=page2?sub=submenu6">Submenu6</a></li>
                            </ul>
                        </li>
                        <li><a href="?act=page3">Page3</a>
                            <ul>
                                <li><a href="?act=page3?sub=submenu1">Submenu1</a></li>
                                <li><a href="?act=page3?sub=submenu2">Submenu2</a></li>
                                <li><a href="?act=page3?sub=submenu3">Submenu3</a></li>
                                <li><a href="?act=page3?sub=submenu4">Submenu4</a></li>
                                <li><a href="?act=page3?sub=submenu5">Submenu5</a></li>
                                <li><a href="?act=page3?sub=submenu6">Submenu6</a></li>
                            </ul>
                        </li>
                        <li><a href="?act=page4">Page4</a>
                            <ul>
                                <li><a href="?act=page4?sub=submenu1">Submenu1</a></li>
                                <li><a href="?act=page4?sub=submenu2">Submenu2</a></li>
                                <li><a href="?act=page4?sub=submenu3">Submenu3</a></li>
                                <li><a href="?act=page4?sub=submenu4">Submenu4</a></li>
                                <li><a href="?act=page4?sub=submenu5">Submenu5</a></li>
                                <li><a href="?act=page4?sub=submenu6">Submenu6</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- Ende Navigationdarstellung //-->

Also ich sehe den Fehler nicht, warum es nicht innerhalb des LI-Tags das Submenu nicht öffnet?
Könnte da einer Helfen

Gruß
Fredolin

 

[Quaese]

Hi,

zunächst solltest du die Submenues nicht absolut positionieren, da sich sonst ihre Dimensionen nicht auf die anderen Elemente auswirkt. Soll heissen, eine Grössenänderung bewirkt kein Verschieben der darunter liegenden Elemente.

Weiterhin darfst du den LIs keine feste Grösse geben. Schliesslich sollen sie ja variabel bleiben. Besser die Ausgangshöhe über line-height definieren.

#navi ul {
    margin: 0 0 10px 2px;
    padding: 0;
    z-index: 10;

}
#navi ul a {
    position: relative;
}
#navi ul li {
    display: block;
    width: 204px;
    /*height: 20px;*/
    line-height: 20px;
    margin: 2px 0;
    padding: 3px 3px;
    border: 1px solid #575757;
    background-color: #ABABAB;
    position: relative;
}
#navi ul li ul {
    display: none;
    /*position: absolute;*/
    position: relative;
}
#navi ul li:hover ul {
    display: inline;
    /*position: absolute;*/
}
#navi ul li ul li {
    margin: 2px 0;
    padding: 3px 0;
    width: 148px;
    height: 18px;
    background-color: #D6D6D6;
}
#navi ul li ul li:hover {
    background-color: #8C8C8C;
}

Ciao
Quaese

 

[Jan-Frederik Stieler]

Hi,
so als additive Verständniserklärung zu Quese

zunächst solltest du die Submenues nicht absolut positionieren, da sich sonst ihre Dimensionen nicht auf die anderen Elemente auswirkt.

Die Elemente welche mit absolute, relative, fixed nehmen das Element aus dem normalen Textfluss.
Static hingegen positioniert das Element wieder im Textfluss.

Viele Grüße

 

[fredolin]

Hallo an Euch beiden

ich danke euch beiden und wie gesagt ich hab den Wald vor lauter Bäumen nicht mehr gesehen.

Super von Euch.. Danke noch mals..

Gruß
Fredolin