Ti potresti spiegare in maniera più elementare
copia e incolla nella tua pagina all'interno dell'elenco così ti rendi conto del primo errore

codice:
<li class="primo">questo testo è nero perché nella classe "primo" ho assegnato 
il colore nero <a href="#">questo è un link, le sue impostazioni saranno quelle predefinite
oppure impostate nel css per i link</a>
se il link deve essere nero, il nero dobbiamo impostarlo su di esso (<a class="primo" ...> e non sul suo contenitore.

Ma se pure imposti la tua classe sul link, non funzionerà.
Quando si definiscono direttamente degli elementi ("a" nel tuo caso) e poi si vogliano differenziarli, è possibile vi siano conflitti o interferenze e visualizzazioni non volute, per questo potrebbe essere più conveniente lasciare i vari link del tutto indipendenti creando direttamente classi diverse, ad esempio

codice:
a.menu {proprietà1: xxx; proprietà2: yyy; proprietà3: zzz;}
a.submenu {proprietà1: aaa; proprietà2: bbb; proprietà3: zzz;}
Ma se non vogliamo creare troppe classi e stiamo seguendo un certo criterio, allora facciamolo sino in fondo.
Nel tuo caso, quand'anche applico la classe "primo" al link in primo piano questo continua ad essere grigiastro e non nero perché le impostazioni cui il browser dà priorità sono quelle di "ul#menu2livelli a {...}"

Poiché stai usando selettori discendenti, definendo elementi all'interno di altri, allora continuiamo su questa strada seguendo il giusto ordine e applicando il nero come colore di partenza generale

codice:
ul#menu2livelli a {
display: block;
padding: 2px 2px;
text-decoration: none;
color: #000;
}
lasciamo le indicazioni per i vari stati dei link (aggiungi una "," saltata, dopo a:focus)

codice:
ul#menu2livelli a:hover,
ul#menu2livelli a:focus,
ul#menu2livelli a:active{
color: #ff0000;
}
e sovrascriviamo il colore per i link del sottomenu

codice:
ul#menu2livelli li ul li a {
color: #7f8c9c;
}
oppure se vogliamo avere la nostra classe "primo" inseriamola così

codice:
ul#menu2livelli a.primo {color:#000}