CSS иерархия классов и идентификаторов

Question

Я строю меню с использованием XHTML, CSS и jQuery, и у меня возникла проблема с моим CSS. Здесь - моя тестовая страница, а здесь - мой css.

У меня проблемы с тем, что мой класс .subMenu наследует свойства моего #menu, цвета и размеры фона одинаковы. Я ищу решение, которое оставляет .subMenu как класс, чтобы я мог использовать его повторно. Я заставил его работать, изменив .subMenu на ID. Странно то, что я редактирую некоторые свойства в своем коде jQuery, используя класс .subMenu, и он меняет их.

Так что мне было интересно, может кто-нибудь сообщить мне, как это исправить, и если это проблема иерархии, если они могут это объяснить.

Спасибо, Леви

Answer 1

Думаю, проблема в том, что #menu> li a будет применять этот стиль ко всем ссылкам внутри тегов li, поэтому все теги li внутри подменю также будут иметь этот стиль. Мне кажется, что единственная разница заключается в цвете фона и переднего плана при наведении, поэтому вы можете исправить это, изменив #menu> li a и #menu> li a: hover на #menu> li> a и #menu> li> a: hover. Таким образом, стили для меню верхнего уровня будут применяться только к ссылкам, которые находятся непосредственно после тега li и непосредственно после элемента #menu. Стили подменю могут оставаться неизменными.