CSS Hierarchie Klassen und IDs

Question

Ich baue ein Menü mit XHTML, CSS und jQuery und ich lief in ein Problem mit meinem CSS. Hier ist meine Testseite, und hier ist mein CSS.

Was ich habe Probleme mit ist, dass meine .subMenu Klasse die Eigenschaften meines #menu erbt, sind die Hintergrundfarben und Größen gleich. Ich bin auf der Suche nach einer Lösung, die .subMenu als Klasse verlässt, damit ich sie wiederverwenden können. Ich habe es zu arbeiten, indem .subMenu auf eine ID zu ändern. Das Seltsame ist, dass ich einige der Eigenschaften in meine jQuery-Code bearbeiten, um die .subMenu-Klasse und es ändert sich diese.

Also habe ich mich gefragt, ob jemand könnte mich wissen, wie es zu beheben und wenn es eine Hierarchie Frage ist, ob sie könnte es erklären.

Danke, Levi

Answer 1

Ich denke, das Problem ist, dass die #menu> li a diesen Stil für alle Links innerhalb der li-Tags gelten, so dass alle von den li-Tags innerhalb des Untermenüs wird auch diese Art haben. Es scheint mir, dass der einzige Unterschied ist in den Hintergrund- und Vordergrundfarben auf schweben, so dass Sie es durch Ändern #menu> li a und #menu beheben könnte> li a: hover #menu sein> li> a und #menu> li> a: Hover. Auf diese Weise wird die Stile für das Top-Level-Menü nur auf Links angewandt werden, die direkt nach einem li-Tag sind, die direkt nach dem #menu Artikel sind. Die Untermenü Stile können gleich bleiben.