Классы иерархии CSS и идентификаторы
Я создаю меню, используя XHTML, CSS и jQuery, и у меня возникла проблема с моим CSS. Здесь - моя тестовая страница, а здесь - мой CSS.
У меня проблемы с тем, что мой класс .subMenu наследует свойства моего #menu, цвета и размеры фона такие же. Я ищу решение, которое оставляет .subMenu как класс, чтобы я мог его повторно использовать. Я заставил его работать, изменив .subMenu на идентификатор. Странно то, что я редактирую некоторые свойства в моем коде jQuery с помощью класса .subMenu, и он меняет их.
Поэтому мне было интересно, может ли кто-нибудь сообщить мне, как это исправить, и если это проблема иерархии, могут ли они объяснить это.
Спасибо, Леви
Ответы 1
Я думаю, проблема в том, что #menu> li a применит этот стиль ко всем ссылкам внутри тегов li, поэтому все теги li внутри подменю также будут иметь этот стиль. Мне кажется, единственная разница заключается в цветах фона и переднего плана при наведении, поэтому вы можете исправить это, изменив #menu> li a и #menu> li a: hover на #menu> li> a и #menu> li> a: наведите указатель мыши. Таким образом, стили для меню верхнего уровня будут применяться только к ссылкам, которые находятся непосредственно после тега li, которые находятся непосредственно после элемента #menu. Стили подменю могут оставаться неизменными.