Hallo,
das liegt an der Spezifität.
Du hast
ul#navigation li
zweimal im CSS. In diesem Fall greift die im Quelltext spätere Anweisung, da beide die gleiche Spezifität haben.
Wenn du beim zweiten Eintrag ul entfernst hat die Anweisung eine geringe Spezifität und die zweite Anweisung kann die erste nicht überschreiben.
Also wird die Spezifität des Selectors durch das Anhängen des Elementes verstärkt? Zu achten ist also immer darauf, ob eine Anweisung mehrmals vorkommt? Zwecks Lesbarkeit sollte der ganze Code eine einheitliche Schreibweise bekommen; also ul#Nav... oder #Nav...?
Ist es überhaupt erforderlich, daß zum Selector noch das Element angeführt wird? Die Identität des Elementes wird ja durch den Selector eindeutig festgestellt? In manchen Tutorien wird das aber so gehandhabt.
Ich habe ein paar mal gelesen, daß Smartphones den hover-Effekt nicht kennen. Mangels eines Solchen kann ich das nicht feststellen. Wenn nun die Webseite für Smartphones geeignet sein soll, sollte man dann diesen weglassen oder wird das mit "@media" gesteuert?
LG Franz