• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit "reiner" HTML/CSS Multi-Level-Navigation

A

alexandergrein

New member
Hallo ich habe meine Navigation umgestellt von Javascript-Unterstützung (hat eh nicht richtig funktioniert) auf momentan noch reiner HTML/CSS Navigation. Die einzelnen Menüpunkte werden später mittels onClick-Event angesprochen (... habe vor AJAX zu verwenden ...)

Hier der Code:

DOCTYPE
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

STYLE
Code: 
<style type="text/css">
	ul#test {
		margin:0em;
		padding:0em;
		text-align:center;
		font-family:Tahoma;
		font-size:11px;
		font-weight:bold;
		white-space:nowrap;
		cursor:pointer;
	}
	ul#test li {
		list-style:none;
		float:left;
		position:relative;
		margin:0.1em;
		border:1px solid #000000;
		padding:0.4em;
		background-color:#606060;
		color:#FFFFFF;
	}

	ul#test li ul {
		margin:0em;
		padding:0em;
		position:absolute;
		top:2.1em;
		left:-0.2em;
		display:none;
	}
	*:first-child+html ul#test li ul {
		top:2.0em;
	}
	ul#test li:hover ul {
		display:block;
	}
	ul#test li:hover {
		background-color:#99FF99;
		color:#000000;
	}
	ul#test li ul li {
		float:none;
		padding:0.4em;
		background-color:#FFFFFF;
		color:#000000;
	}
	ul#test li ul li:hover {
		background-color:#FFFF99;
		color:#000000;
	}
</style>

BODY
PHP: 
<ul id="test">
	<li>Kategorie 1
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3: Schon ein bisschen länger</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li>Kategorie 2
		<ul>
			<li>Item 1</li>
			<li>Item 2: Etwas kürzer</li>
			<li>Item 3</li>
		</ul>
	</li>
	<li>Kategorie 3
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6: Letzter Eintrag</li>
		</ul>
	</li>
</ul>


Das Problem: Im Firefox geht es ziemlich schwer mit der Maus über das Sub-Menü zu fahren, in der Regel verschwindet es vorher.
Im Internet Explorer schaffe ich es überhaupt nicht.

Entweder stimmt etwas mit meinem CSS-Code nicht oder ich nutze den falschen DOCTYPE


Zusätzlich ist das ganze Beispiel noch im Anhang in der txt-Datei
 

Anhänge

  • navigation.txt
    1,5 KB · Aufrufe: 5
Zuletzt bearbeitet:
magnetic_water schrieb:
Imo kann IE keine Hover-Menüs.

Und im FF gehts bei mir problemlos...
Zum Vergrößern anklicken....

Im IE wird mir das Submenü angezeigt, aber drauf fahren kann ich nicht.
Habe versucht folgenden Code bis auf die A-Tags anzupassen.
Dynamisch Navigationsleisten einblenden

Nur warum funktioniert es dort, aber bei mir nicht?

Und im FF verschwindet das Sub-Menü wenn ich zu langsam von den "Kategorien" auf die "Items" fahre mit der Maus.
 
alexandergrein schrieb:
Das Problem: Im Firefox geht es ziemlich schwer mit der Maus über das Sub-Menü zu fahren, in der Regel verschwindet es vorher.
Im Internet Explorer schaffe ich es überhaupt nicht.

Entweder stimmt etwas mit meinem CSS-Code nicht oder ich nutze den falschen DOCTYPE
Zum Vergrößern anklicken....

Kann sein, dass ich irgendwas falsch sehe, aber mir scheint, Du hast die a-Tags vergessen...
 
Die A-Tags habe ich mit Absicht nicht eingebunden, weil ich ein einfaches onClick-Event pro Menü-Item haben möchte.

Das was mich interessiert ist: Warum verschwindet das Sub-Menü, wenn ich den Mauszeiger von den Kategorien zu den Items bewegen möchte (im FF)

Was ich noch anmerken möchte: Bei mir Zuhause funktioniert das Menü im IE einwandfrei, nur bei mir in der Firma nicht. Dort wird mir zwar das Sub-Menü angezeigt, aber sobald ich mit dem Mauszeiger von den Kategorien weggehe, verschwindet es auch wieder :(
 
Habe es durch einen Tipp rausbekommen:

PHP: 
ul#test li ul {
		margin:0em;
		padding:0em;
		padding-top:0.1em;
		position:absolute;
		top:2.0em;
		left:-0.2em;
		display:none;
	}

Ist die Lösung
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben