Lieber Matthias Apsel,

hast Du das auch getestet?

Natürlich nicht ;-)

*g*

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

Ich habe mit einigen Varianten herumexperimentiert. Z-Index ist nicht die Lösung, jedenfalls nicht alleine. Es gelingt mir nicht, die gerade unsichtbaren Listen nicht-hoverbar zu bekommen, denn das Hovern über ihnen macht sie ungewollt sichtbar.

Vielleicht muss ich zusätzliche Animationen zu height und width machen, die nach dem opacity-Ändern greifen...

Und jetzt verstehe ich auch dein Problem ;-)

Hmm. Mal sehen:

nav li ul {

opacity: 0;
  z-index: -10;
  transition: opacity ease 1s;
}

  
Das Ein- und Ausblenden erfolgt im Zeitraum einer Sekunde, beginnend sofort. Um Zitterfinger zu unterstützen, möchte ich aber, dass das Einblenden (relativ) sofort erfolgt, das Ausblenden aber erst nach drei Sekunden oder später! Das ist mit dem Transitions-Konzept machbar, wie ich herausgefunden habe.  
  
Wollte ich, dass das Ausblenden für Zitterfinger erst nach drei Sekunden erfolgte, müsste ich das Ein- und Ausblenden generell auf drei Sekunden einstellen. Dafür aber kann ich der :hover-Klasse ein zusätzliches transition-delay von 0s geben, was das Einblenden unmittelbar und das Ausblenden zeitverzögert macht. Fast fertig!  
  
Jetzt entsteht ein unschöner Nebeneffekt: Hovere ich über einen neuen Link, zu dem es ein anderes oder kein "Untermenü" gibt, so verschwindet das nun "nicht mehr gültige" vorherige Menü erst nach seiner verlängerten "Zitterfingerunterstützung". Das will ich natürlich nicht! Aber woher sollte CSS auch wissen, dass ich nur beim endgültigen Verlassen von #hover-navigation die Verlängerung beim Ausblenden haben will...?  
  
Abhilfe schafft der Selektor `#navigation-hover:hover li ul`{:.language-css}, der alle Unterlisten selektiert, auch die gerade gehoverte. Hier kann ich nun eine sofort wirksame Animation definieren, damit die nicht mehr gültigen Unterlisten sofort verschwinden. Für die jetzt einzublendende Unterliste gilt der Selektor mit der höheren Spezifität: `#navigation-hover li:hover ul`{:.language-css}. Damit klappt nun wirklich fast alles:  
  
~~~css
/* <div id=hover-navigation"> enthält die Hover-Listen */  
#hover-navigation {  
	margin: 0;  
	padding: 0;  
	position: absolute;  
	width: 190px;  
	z-index: 1;  
}  
  
#hover-navigation ul {  
	background: white;  
	position: absolute;  
	width: 100%;  
}  
  
/* unsichtbare Unterlisten */  
#hover-navigation li ul {  
	margin: calc(-1.5em - 10px) 0 0 190px;  
	opacity: 0;  
	transition:  
		/* zeitverzögert ausblenden */  
		opacity 0.5s ease 3s;  
	z-index: 0;  
}  
  
/* Unterliste wenn woanders gehovert wird */  
#hover-navigation:hover li ul {  
	transition:  
		/* sofort ausblenden */  
		opacity 1s ease 0s;  
}  
  
/* Unterliste beim Hovern */  
#hover-navigation li:hover > ul {  
	opacity: 1;  
	transition:  
		/* sofort einblenden */  
		opacity 1s ease 0s;  
	width: 100%;  
	z-index: 2;  
}

Einzig das Aufklappen der unsichtbaren Unterlisten stört, die unbeabsichtigt gehovert werden. Das sieht man auch an den Scrollbars, die nur dann erscheinen, wenn man gerade überhaupt die Navi hovert. Brauche ich denn noch weitere Animationen? Etwa zu width und height? Oder womit werden die unsichtbaren Unterlisten nicht mehr hoverbar? Also doch ein margin-left:-9999px?

Liebe Grüße,

Felix Riesterer.