Unlösbar ohne JavaScript? Transitions können das nicht!

[Matthias Apsel]

Om nah hoo pez nyeetz, Felix Riesterer!

hast Du das auch getestet?

Natürlich nicht ;-)

Die Animation für das Ein- oder Ausblenden (mit opacity) ist nicht mein Problem. Mein Problem ist, dass die display-Eigenschaft nicht verzögert geändert werden kann. Wenn nämlich ein Zitterfinger von einem <li> abgleitet, verschwindet sofort (eben ohne Verzögerung) die verschachtelte Liste, ohne dem Zitterfinger die Gelegenheit zu geben, doch noch rechtzeitig wieder darauf zu zeigen.

Noch ein Grund mehr, (Navigations-)Inhalte eben nicht mit display: none zu verstecken (und auch nicht mit left -9999px) sondern andere Varianten zu verwenden. Und jetzt verstehe ich auch dein Problem ;-)

Ebenfalls ungetestet schlage ich vor:

nav li ul {  
  opacity: 0;  
  z-index: -10;  
  transition: opacity ease 1s;  
}  
/* Die Untermenüs liegen transparent im Hintergrund */  
/* Texte können markiert, Links geklickt werden */  
nav:hover li ul {  
  z-index: auto;  
}  
/* Mauszeiger über der Navigation -> Untermenüs transparent aber im Vordergrund */  
nav li:hover > ul {  
  opacity: 1;  
}  
/* Deckkraft wird für das konkrete Untermenü animiert */

Matthias