1차 메뉴 선택자 : .menu > li
2차 메뉴 선택자 : .menu > li > ul > li
3차 메뉴 선택자 : .menu > li > ul > li > ul > li
1차 이상의 메뉴 : .menu li
2차 이상의 메뉴 : .menu > li ul > li
3차 이상의 메뉴 : .menu > li > ul > li li
.menu > li > ul > li li {
background-color: yellow;
}
(1) 리스트의 모든 스타일을 제거(여백, 표시방식)
(2) 모든 a태그의 스타일을 제거
(3) 1차 메뉴의 항목들의 표시 방식(display)을 inline-block으로 변경
(4) 2차 이상의 메뉴(ul)들 배치 방식을(position) absolute로 변경
모든 메뉴(li)는 기준점 설정을 위해 배치 방식을 relative로 변경
(5) 2차 이상의 메뉴(ul)를 숨김 처리
(6) 메뉴(li)에 마우스를 올리면(hover) 하위 메뉴를 표시
(7) 메뉴 항목(li)에 마우스가 올라가면(hover) 색상을 변경
(8) 3차 메뉴 이상은 오른쪽에 나오도록 처리
(9) 메뉴 내부에 글자가 많은 경우 밑줄임표 처리
(10) 1차 메뉴 중 오른쪽 메뉴(.right-menu)에 대한 처리
(11) 오른쪽 메뉴에 있는 3차 이상 메뉴에 대한 처리
(전제조건) 폭이 확정적이어야 한다.