Aloha ;)

Vielen Dank für die schnelle Rückmeldung!
Nach wiederum einigen Tests ... leider in keine Richtung erfolgreich ... :(

z-index: 10;
Ich nehm für Navigationen sogar gerne einen z-Index von 100...

Ich habe 100 eingesetzt und auch getestet, ob mir ein z-Index von 1 bei #contentfield etwas nützt, aber immer ist das Dropdown-Menü hinter dem div-Layer ...

1.: du solltest darüber nachdenken, statt
nav ul li a:hover { ... }
das hier:
nav ul li:hover a { ... }

Ja, geändert.

2.: mir fällt auf (wie du mit beliebigen Entwicklerwerkzeugen wie Firebug oder den Google-Chrome-Webdevtools prüfen kannst), dass deine li's beim hovern des darunterliegenden a massiv höher werden (etwa doppelt so hoch). Ich schätze, dass das der Hauptgrund für das Flackern ist. Versuche sicherzustellen, dass die height deiner li's hartcodiert ist, um so ein Springen zu vermeiden. Außerdem ist es sicher im Sinne des Erfinders, dass die Navigationseinträge alle denselben "Platz" einnehmen.

Auch das geändert.

3.: Das padding der a's: Ich hab das vorher (eventuell zu Unrecht?) schon als mögliche Fehlerquelle gescholten. Aber selbst wenn es das nicht ist: Vielleicht ist es sinnvoller, in diesem Anwendungsfall (ich schätze es geht nur darum, die Schrift "mittig" darzustellen), vertical-align statt padding zu nutzen. (Anm.: Ich bin aktuell nicht 100% sicher ob das geht, müsste aber meiner Meinung nach... bin nur gerade zu faul zum testen :P)

Beides probiert.
Aktuell mit "vertical-align".

Ich hoffe das hilft dir weiter, für Nachfragen etc. stehe ich selbstverständlich zur Verfügung ;)

Das nutze ich gerne. ;)
Ich bin echt ratlos. Wo liegt der Fehler?
Jetzt sieht alles noch chaotischer aus. "visibility" ist jetzt ganz rausgenommen.

Bin gespannt, ob ich da noch eine Lösung finde ...
Vielen Dank!