Иерархические классы и идентификаторы 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.Стили подменю могут остаться прежними.