"Gehoverter" div ist magisch verhext

Nach dem Ausmerzen diverser dummer Fehler habe ich endlich eine div Kombination mit CSS hinbekommen, die im Navigationsmenue gut zu funktionieren scheint, aber weiter unten auf der Seite hat ein div ein kurioses Vehalten:

Habe zwei divs so gecodet, daß beim Hovern des einen der andere, welcher zunächst unsichtbar war, erscheint.

Soweit so gut.
Da ich Neuling bin platze ich schon fast vor Stolz, wenigstens bis hierhin gekommen zu sein.

Es funzt auch (freu!) sehr schön.

Es funzt ebenso, wenn ich auf der Seite weiter nach unten scrolle und dann hovere. Warum sollte es auch nicht?

Aber: Wenn ich noch ein wenig weiter runter scrolle, so daß der erste div nahe am oberen Bildschirmrand liegt, dann geht es plötzlich nicht mehr!
Ich kann draufhovern, drauf rumhüpfen oder Kreise malen - nichts geht mehr.

Ist mein div irgendwie verhext? Der Fluch ist browserübergreifend aktiv.

Weiß jemand wie ich diese Verhexung bekämpfen kann?

Herzlichen Dank!

Kann eingesehen werden unter : http://www.learn-spanish-thoroughly.de/

Der zu hovernde link ist der mit dem Fernsehen.

Herzlichen Dank für den Hinweis...... peinlich beschämt stelle ich fest, daß ich die Validierung ja auch schonmal hätte machen können bevor ich hier frage.

Werde allerdings nicht schlau daraus:
Der Validator kritisiert alle meine divs im Navigationsmenue - allerdings funktioniert das Menue sehr gut in allen neuen Browsern.

Dort hingegen, wo das Problem besteht, ist der Validator zufrieden und kritisiert gar nichts.

Also: was ich falsch gemacht habe funzt, und was ich richtig gemacht habe funzt nicht????

Oder lese ich das was falsch?

Werde weiter dran arbeiten, bin dankbar für jeden Hinweis.

Hi,

danke für die Ideen und insbesondere die Idee mit dem Z- index. Doch leider scheint es etwas anderes zu sein, das den Fluch bewirkt,
denn der Z - index für das Nav. menu ist 1 byw 2, wahrend das Problem div den Z index 5 hat. Habe es probehalber mal auf 50 oder 500 erhöht, macht aber keinen Unterschied.
Aus Verzweiflung hab ich auch mal die Z indices vertauscht, also Navi Menu hoch und Problem Div niedrig, aber auch das ändert nichts.
Kurz, alle Variationen der Z indices beheben nicht das Problem.

Wirklich ein merkwürdiges Phänomen.

Woran könnte es noch liegen?

Danke für die Anregung, habe ich daraufhin gerade gemacht.

Arbeite mich gerade hindurch; habe zwar noch keinen direkten Hinweis bekommen, aber als Firebug graphisch (per 'inspect element') Elemente hervorgehoben hat, habe ich bemerkt, daß das "vehexte" (=nicht hoverbare) Gebiet mit der Ausdehnung der ul im Navimenu übereinstimmen könnte.

Hypothetisch angenommen das wäre so, dann würde die Meckerei des Validators Sinn machen, dass eine ul kein divs enthalten darf.

Frage an die Experten hier: Macht meine Überlegung soweit Sinn, glaubt Ihr, ich bin auf der richtigen Spur?

Dann müßte ich vielleicht die divs aus dem Navimenu schmeißen. Der Grund darin divs zu verwenden war übrigens der, dass ich divs eine id und damit eine einzigartige Höhe, Breite und vor allem Position zuweisen kann. Damit bekomme ich ein definiertes Layout was sich wo befindet.

Frage: Gibt es ein anderes Element als div, welches in einer ul erlaubt ist und ebenfalls id/Höhe/Breite/relative Position mit Pixelwerten annimmt? (Anfängerfrage, ich weiß, aber bitte nicht meckern, ich bin Anfänger). Ich will ohne flow auskommen, denn das hab ich noch nie richtig hinbekommen und es sieht in verschiedenen Browsern immer irgendwie unterschiedlich aus).

Wenn es so ein Elemnt gibt, dann würde es anstelle der divs benutzen, der Validator wäre zufrieden und vielleicht funzt es dann ja.

Wie immer Danke für Eure Anregungen!

Merke gerade dass meine letzter Frage dümmer ist als ich ursprünglich dachte, denn <li> selbst scheint ja id, Höhe, position etc.etc. anzunehemen. Werde mal versuchen, die divs rauszuwerfen und sehen ob es hilft.
Aber nochmal die Frage an die anwesenden Experten, bin ich denn überhaupt auf dem richtigen Wege?

Weiteres Experimentieren bis jetzt ohne Erfolg, Bin aber zu der Ansicht gelangt, daß es doch nicht die divs in der ul sind, sondern, wie schon von abry vorgeschlagen, die Z-indices.

Habe einen Scheinerfolg zu vermelden: wenn der Z-Index des Probleme bereitenden divs "thirdleft" höher ist als alle anderen, dann funktioniert die Hoverfunktion endlich anstandslos, also in jeder Fensterposition.

Aber: wenn ich dann auf das Navimenue gehe, ist die aufklappende Liste unter dem div thirdleft und damit icht mehr sichtbar.

Auch: wenn ich alle z indices im oberen Seitenbereich tief halte, dann verliere ich den Effekt des nicht wegsrollenden Navimenus. Es scrollt zwar auch dann n icht weg, wird aber von den anderen heraufssrollenden Elementen überdeckt. Das sieht saublöd aus.

Kurz: der Z-Index löst ein Problem, indem er ein anderes aufwirft.

Das zu lösen geht bei weitem über meine Fähigkeit und Erfahrung. Kann jemand helfen? Danke sehr!

Das Problem scheint gelöst zu sein (freu!).

Herzlichen Dank für alle Ideen, sie waren durchweg hilfreich. Und sicher hat threadi recht mit dem Hinweis, die divs aus dern uls zu entfernen.

Dennoch habe ich nach weiterem probieren eine andere Lösung gefunden, nämlich jeden Ober-Menüpunkt in der Navigationsleiste nicht, wie üblich, eine Unterliste mit weiteren Menüpunkten zuzuordnen sondern lediglich ein weiteres aufpoppendes div, welche wiederum die Unterpunkte als Li-Elemente enthält. Das alles bedarf noch des optischen Feinschlifes, aber es funktioniert prächtig. Ich freu mich eine Lösung gefunden zu haben, die einfach und übersichtlich ist, abber leistet was sie soll.

Jedenfalls funzt das hovern jetzt in allen Positionen: http://www.learn-spanish-thoroughly.de/
Was leider noch nicht klappt, ist die Darstellung in alten IEs. Leidiges Thema!!! Das wird wohl bald meine nächste Frage hier sein.

Danke für alle Ratschläge!