classi gerarchia CSS e ID

Question

Sto costruendo un menu usando XHTML, CSS e jQuery e mi sono imbattuto in un problema con il mio CSS. Qui è la mia pagina di prova, e qui è il mio css.

Quello che sto avendo problemi con la mia classe è che .subMenu eredita le proprietà della mia #menu, i colori di sfondo e le dimensioni sono le stesse. Sto cercando una soluzione che lascia .subMenu come classe in modo da poter riutilizzare. Ho preso a lavorare modificando .subMenu a un ID. La cosa strana è che posso modificare alcune delle proprietà nel mio codice jQuery utilizzando la classe .subMenu e cambia quelli.

Così mi chiedevo se qualcuno potesse farmi sapere come risolvere il problema e se fosse un problema di gerarchia se potrebbe spiegarlo.

Grazie, Levi

Answer 1

Credo che il problema è che il #menu> li a applicherà quello stile per tutti i link all'interno dei tag li, così tutti i tag li all'interno del sottomenu avrà anche questo stile. A me sembra che l'unica differenza è nel sfondo e primo piano colori su passaggio del mouse, così si potrebbe risolvere il problema modificando #menu> li ae #menu> li a: hover per essere #menu> li> a e #menu> li> a: hover. In questo modo, gli stili di menu di livello superiore verrà applicato solo ai collegamenti che sono direttamente dopo un tag li che sono direttamente dopo l'elemento #menu. Gli stili sottomenu possono rimanere lo stesso.