Navigation: DropDown funktioniert irgendwie nicht ...

[Camping_RIDER]

Aloha ;)

Die Version mit "visibility" funktioniert besser, aber keinesfalls einsatzbereit. Und mit "font" und "z-index" hatte ich noch weniger Erfolg.

[...]
nav ul li:hover ul {
visibility: visible;
//font: inherit;
//z-index: auto;
}
nav ul li ul {
display: inline;
position: absolute;
padding: 0px;
top: 4em;
left: -0.1em;

visibility: hidden;
//font: 0/0 serif;
//z-index: -1;
}
[...]

  
Ja, dass der z-Index so nicht funktioniert ist nicht verwunderlich :)  
  
z-Index ist zum "Übereinanderstapeln" von Elementen. Also eigentlich schon das was du suchst. Aber: Das was weiter oben liegt (also das sichtbare, das was näher am Betrachter liegt), hat den höheren z-Index. `z-index: auto;`{:.language-css} ist soviel wie `z-index: 0;`{:.language-css}, d.h. dein Inhalt und deine Navigation haben "denselben" z-Index, d.h. keins der beiden ist vorzugsweise sichtbar. Mit `z-index: -1;`{:.language-css} sorgst du sogar dafür, dass deine Navigation sogar noch hinter einem eventuellen background-image des body auftaucht... Die Einstellung die du suchst ist:  
  
`z-index: 1;`{:.language-css}  
  
oder fast besser (die Navigation soll ja immer vorne sein, selbst wenn es noch Elemente zwischen Textkörper und navi gibt):  
  
`z-index: 10;`{:.language-css}  
  
Ich nehm für Navigationen sogar gerne einen z-Index von 100...  
  
Wenn du das geändert hast, wirst du feststellen, dass die Navigation zwar sichtbar ist, aber immer noch nicht funktioniert (es tritt ein "Flackern" der Hover-Effekte beim drüberfahren auf). Das kann unterschiedliche Ursachen haben; vielleicht ist es ja eine der Folgenden, die mir spontan auf-/einfallen:  
  
1\.: du solltest darüber nachdenken, statt  
  
`nav ul li a:hover { ... }`{:.language-css}  
  
das hier:  
  
`nav ul li:hover a { ... }`{:.language-css}  
  
verwenden. Damit stellst du sicher, dass der hover Effekt erscheint, solange das li-Element gehovert wird. Natürlich ist das im Prinzip das Gleiche (denn `a`{:.language-css} soll `li`{:.language-css} ja vollständig ausfüllen), aber du umgehst damit eine Fehlerquelle, die Flackern erzeugen kann: Und zwar wenn der Link aus irgendeinem Grund doch kleiner ist als das `li`{:.language-css} (z.B. padding/margin), dann wird trotzdem das `li`{:.language-css} gehovert selbst wenn du den a nicht sofort triffst...  
  
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.  
  
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](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/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)  
  
Ich hoffe das hilft dir weiter, für Nachfragen etc. stehe ich selbstverständlich zur Verfügung ;)  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[