Classes de hiérarchie CSS et ID

Question

Je construis un menu en utilisant XHTML, CSS et jQuery et j'ai rencontré un problème avec mon CSS. Here est ma page de test, et here est mon css. Ce qui me pose problème, c'est que ma classe .subMenu hérite des propriétés de mon #menu, les couleurs et tailles d'arrière-plan sont les mêmes. Je suis à la recherche d'une solution qui laisse .subMenu en classe pour que je puisse le réutiliser. Je l'ai eu pour travailler en changeant .subMenu à un ID. Ce qui est bizarre, c'est que j'édite certaines propriétés de mon code jQuery en utilisant la classe .subMenu et cela les change. Donc, je me demandais si quelqu'un pouvait me dire comment y remédier et s'il y avait un problème de hiérarchie s'ils pouvaient l'expliquer.

Merci, Levi

Answer 1

Je pense que le problème est que l'un #menu> li appliquera ce style à tous les liens à l'intérieur des balises li, donc toutes les balises li à l'intérieur du sous-menu aura également ce style. Il me semble que la seule différence est dans les couleurs d'arrière-plan et de premier plan sur hover, donc vous pouvez le réparer en changeant # menu> li a et # menu> li a: hover pour être # menu> li> a et # menu> li> a: hover. De cette façon, les styles pour le menu de niveau supérieur ne seront appliqués qu'aux liens qui se trouvent directement après une étiquette li qui se trouve directement après l'élément #menu. Les styles de sous-menu peuvent rester identiques.