clases y los identificadores de jerarquía CSS

Question

Estoy construyendo un menú utilizando XHTML, CSS y jQuery y me encontré con un problema con mi CSS. Aquí es mi página de prueba, y aquí es mi CSS.

Lo que yo estoy teniendo problemas con mi clase es que .subMenu hereda las propiedades de mi #menu, los colores y tamaños de fondo son lo mismo. Busco a una solución que deja .subMenu como clase para que pueda volver a utilizarlo. Yo tengo que trabajar cambiando .subMenu a una identificación. Lo extraño es que puedo modificar algunas de las propiedades en mi código jQuery utilizando la clase .subMenu y cambia aquellos.

Así que me preguntaba si alguien puede que me haga saber cómo solucionarlo y si era un problema de jerarquía si podría explicarlo.

Gracias, Levi

Answer 1

Creo que el problema es que el #menu> li a ese estilo se aplicará a todos los enlaces dentro de las etiquetas li, así que todas las etiquetas li dentro del submenú también tendrá este estilo. A mi me parece que la única diferencia está en el fondo y el primer plano colores en vuelo estacionario, por lo que podría solucionarlo cambiando #menu> li ay #menu> li a: hover ser #menu> li> a y #menu> li> a: hover. De esta manera, los estilos de menú de nivel superior sólo se aplica a los enlaces que son directamente después de una etiqueta li que son directamente después del artículo #menu. Los estilos de submenú pueden permanecer igual.