Z-Index und relative / absolute Positionierung

Ich habe einige Probleme mit dem Z-Index und der Positionierung. Grundsätzlich sollten sich beim Bewegen des Mauszeigers über die Menüelemente (Startseite, Info usw.) Farbspritzer unter dem Menü befinden:

http://www.saradouglas.net/home

Stylesheet befindet sich hier.

Dies funktionierte einwandfrei, wenn jedes Splash-Div auf absolute Positionierung eingestellt war, aber ich erkannte, dass diese an verschiedenen Stellen in unterschiedlichen Bildschirmauflösungen angezeigt wurden. Ich dachte, es wäre nur ein Fall, dies in eine relative Positionierung umzuwandeln und dann die Koordinaten entsprechend anzupassen. Leider erscheinen meine Spritzer jetzt nicht mehr so ​​im Menü, wie sie sollten.

Zur Verdeutlichung möchte ich, dass die Spritzer unter dem Menü angezeigt werden - daher sollte das Menü immer über den Spritzern angezeigt werden. Dies ist erst zu einem Problem geworden, seit das Menü auf "Relativ" gesetzt wurde und diese auf "Absolut" spritzen.

Ich hoffe, dass dies einfach zu beheben ist und mir nur etwas fehlt. Ich hoffe, dass jemand hier mir sagen kann, wo ich falsch liege, und eine Lösung anbieten kann!

Bisher wurden einige gute Antworten eingereicht, die mein Problem jedoch leider nicht behoben haben. Ich habe versucht, den Menühintergrund der ul-Klasse und nicht der div hinzuzufügen, aber das hat das Problem nicht verändert.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage