CSS 계층 구조 클래스 및 ID

Question

XHTML, CSS 및 JQuery를 사용하여 메뉴를 만들고 있으며 CSS와 문제가 발생했습니다.여기 내 테스트 페이지이고 여기 내 CSS입니다.

내가 문제가있는 것은 내 .submenu 클래스가 #menu의 속성을 상속하는 것입니다. 배경색과 크기는 동일하다는 것입니다. 나는 .submenu를 수업으로 남겨 두는 솔루션을 찾고 있으므로 재사용 할 수 있습니다. .submenu를 ID로 변경하여 일하게되었습니다. 이상한 점은 .submenu 클래스를 사용하여 jQuery 코드의 일부 속성을 편집하고 변경한다는 것입니다.

그래서 누군가가 그것을 고치는 방법을 알려줄 수 있는지, 그리고 그것이 설명 할 수 있다면 계층 구조 문제인지 궁금합니다.

고마워요, 레위

Answer 1

문제는 #Menu> li a가 LI 태그 내부의 모든 링크에 해당 스타일을 적용 할 것이므로 하위 메뉴 내부의 모든 LI 태그 도이 스타일을 가질 것이라고 생각합니다. 유일한 차이점은 호버의 배경과 전경 색상에있는 것으로 보이므로 #Menu> li a 및 #Menu> Li A : 호버로 #Menu> li> a 및 #Menu>를 변경하여 고칠 수 있습니다. li> a : 호버. 이 방법으로, 최상위 메뉴의 스타일은 #Menu 항목 바로 뒤에있는 Li 태그 바로 뒤에있는 링크에만 적용됩니다. 하위 메뉴 스타일은 동일하게 유지 될 수 있습니다.