Problem bei CSS-DropDown Menü

[Fuma15]

Hi Leute,

ich habe ein Problem bei meiner Webseite.
Und zwar möchte ich gerne ein DropDown-Menü mit CSS bauen damit der DropDown-Effekt selbst dann funktioniert wenn der User JavaScript deaktiviert hat.

Auf http://www.cssplay.co.uk/menus/final_drop2.html habe ich ein solches DropDown Menü gefunden und habe den Quelltext übernommen und für meine Seite umgeändert.

Hier ist der HTML-Code meiner Seite:

<div class="menu">
			<div class="navi">
				<ul>
					<li><a href="./home.html">Home</a></li>
					<li><a href="./uns.html">&Uuml;ber uns</a></li>
					<li><a href="./ballon.html">Unsere Luftballons 	&dArr;</a>
					
					<ul>
						<li><a href="./farben.html">Farben</a></li>
						<li><a href="./formen.html">Formen</a></li>
						<li><a href="./veranstalltungen.html">Veranstalltungen &rArr;</a>
						<ul>
							<li><a href="./hochzeit.html">Hochzeit</a></li>
							<li><a href="./halloween.html">Halloween</a></li>
							<li><a href="./b-day.html">Geburtstag</a></li>
							<li><a href="./betrieb.html">Betriebsfeier</a></li>
							<li><a href="./abschluss.html">Abschlussfeier</a></li>
						</ul>
						</li>
					</ul>
					</li>
					
					<li><a href="./center.html">Service-Center</a></li>
					<li><a href="./kontakt.html">Kontakt &dArr;</a>
					<ul>
						<li><a href="./form.html">Kontaktformular</a></li>
						<li><a href="./guestbook.html">G&auml;stebuch</a></li>
					</ul></li>
					<li><a href="./impressum.html">Impressum</a></li>
				</ul>
			</div>
<div>

Und hier der notwenidge CSS-Teil:

.menu{
	position:absolute;
	margin-top:170px;
	width:1100px;
}

.navi{
	position:absolute;
	margin-top:-1px;
	z-index:2;
	margin-left:150px;
}

.navi li a:link,a:active,a:focus,a:hover,a:visited{
	color:#e5a023;
	font-size:24px;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}

.navi li{
	display:inline;
	padding:10px;
	position:relative;
}

/*-------------------- Navigation im Drop-Down-Style ------------------*/

/* style the outer div to give it width */
.navi {
width:100%;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.navi ul {
padding:0;
margin:0;
list-style-type:none;
}
.navi ul ul {
display:block;
width:400px;
height:100px;
}
.navi ul ul li{
	float:left;
	padding:0px;
	margin:0px;
	width:250px;
}

.navi ul ul a{
	display:block;
	width:250px;
	padding:0px;
	margin:0px;
	height:auto; 
	line-height:1em;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.navi li {
width:400px;
position:relative;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.navi ul ul {
display:block;
visibility:hidden;
position:absolute;
height:100px;
top:31px;
left:0; 
width:400px;
}

/* position the third level flyout menu */
.navi ul ul ul{
left:220px; 
top:0;
width:400px;
}

/* make the second level visible when hover on first level list OR link */
.navi ul li:hover ul,
.navi ul a:hover ul{
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.navi ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.navi ul :hover ul :hover ul{ 
visibility:visible;
}

Mein Problem ist jetzt, dass beim Veranstalltungslink er mir zu früh rausspringt und ich nicht in das 3. Untermenü komme.

Ich habe bereits verschiedenste Dinge probiert. Jetzt kommt man wenigstens etwas besser auf den Veranstalltungslink.

Kann mir da bitte jemand helfen? Das wäre sehr freundlich

MfG Fuma15

 

[Maik]

Hi,

ich hab den Eindruck, dass du da ein paar relevante Selektoren aus dem Original-Stylesheet und CSS-Angaben in den übrigen Selektoren entfernt hast, wenn ich die beiden Stylesheets im Überflug miteinander vergleiche.

Also besser nochmal das Original-Stylesheet einsetzen, und mit "Köpfchen" nur die Regeln entfernen, die die Funktionalität des Dropdown-Menüs nicht tangieren, und alle übrigen auf die persönlichen Bedürfnisse anpassen.

Und wieso hast du die Workarounds für den IE6 komplett entfernt? Denn so öffnet sich jetzt in ihm keines der Submenüs mehr.

mfg Maik

 

[Fuma15]

Ich habe lediglich die Styles entfernt, die sich nur um die Formatierung gekümmert haben.
Die IE-Hacks habe ich entfernt weil man mir sagte das diese keine Rolle spielen aber ich werde es einfach mal auf deine Variante probieren.

Danke schonmal dafür.