메뉴 박스 > 1차 메뉴 > 1차 메뉴 아이템 > 2차 메뉴 > 2차 메뉴 아이템 구조 이해!
1. ul의 자식으로는 li 밖에 못 온다 그러므로 1차 메뉴 텍스트 a의 동생으로 ul을 입력해준다
2. .menu-1 > ul ul (.menu-1의 자식 ul 안에 있는 ul들)
3. .menu-1에 background-color를 주었는데 display:none;을 해주고 hover를 입히다 보니
2차 메뉴 아이템들이 사라졌다 나타났다 한다. 그런 과정에서 .menu-1까지 넓이가 늘어나고
줄어들고 한다. 이런 불필요한 행동을 멈추기 위해 2차 메뉴를 유령화를 시킨다.(.menu-1 > ul ul { position:absolute; })
4. 2차 메뉴까지 배경색이 먹지 않던 것을 .menu-1 ul 에 background-color 를 입혀 전체 메뉴에 색을 입힌다.
5. 4번의 연장선으로 1차 메뉴에만 padding이 들어 있다가 .menu-1 ul > li > a(.menu-1 의 후손인 ul들의 메뉴 아이템 까지) 이런식을 통해 전체 메뉴 아이템에 padding을 입힌다.
6. 4번, 5번과 마찬가지로 hover가 1차 메뉴에만 먹다가 2차 메뉴에게도 입히고 싶으니 .menu-1 ul > li:hover > a (.menu-1 의 후손인 ul의 메뉴 아이템까지) 이런 식으로 hover을 입힌다.