Ein ID-Bezeichner muß im HTML-Code eindeutig sein, darf darin nur einmal vergeben werden.
Aus
<li id="navigation"> wird
<li class="navigation">, denn Klassen dürfen unbegrenzt enthalten sein.
Ansonsten verstehe ich nicht, wieso Du nicht weißt, wie Du die Elemente im CSS ansprechen sollst, wenn Du nach eigener Aussage schon ein "Top-Level-Menu" erstellt hast. Die Technik bleibt dieselbe, nur dass man sich halt den Menüebenen entsprechend nach unten durcharbeitet - siehe mein Beispiel.
Und was Du uns da jetzt präsentierst, ist genau so eines, eben ohne Untermenüs.
Also Klassen würde ich gegenüber den Selektoren bevorzugen, da mir das auf den ersten Blick schwieriger vorkommt.
Dann wage mal einen zweiten oder dritten Blick darauf, um es zu verstehen. So schwierig ist das überhaupt nicht.
Du bildest in dieser Art von Selektor lediglich die Hierarchie der Listenelemente ab:
CSS:
/* 1. Menüebene */
ul li {}
ul li a {}
/* 2. Menüebene */
ul li ul li {}
ul li ul li a {}
/* 3. Menüebene */
ul li ul li ul li {}
ul li ul li ul li a {}
/* usw. */
Ansonsten fügst du halt in meinem Beispiel die Klassen im HTML- u. CSS-Code ein.
Nur ganz ohne Kind- oder Nachfahrenselektoren wirst Du bei einem Multi-Level-Menü schnell an Deine Grenzen stoßen, damit beispielsweise die CSS-Regeln der Submenüs vom Browser nicht auf die Hauptmenüpunkte angewendet werden, und anders herum natürlich auch.
Stichwörter: Kaskade & Spezifität der Regelsätze - siehe hierzu
https://wiki.selfhtml.org/wiki/CSS/Kaskade
Es gilt auch zu bedenken, wie sich der HTML- u. CSS-Code zukünftig am einfachsten/wirtschaftlichsten pflegen lässt.
Mit unzähligen Klassennamen, die mit jeder neu hinzugekommenen Untermenüebene entsprechend zu erweitern wären, und den HTML-Code noch weiter unnötig aufblähen, ganz sicher nicht.
