드롭다운 메뉴 2차 3차 메뉴

드롭다운 메뉴

3차부터는 옆으로 펼쳐지는 메뉴

2차,3차 메뉴를 만들기 위해서는 모든 메뉴아이템(ul,li)이 position:relative를 가지고 있어야 메뉴를 담을 수 있다.

2차메뉴박스 이하부터는 메뉴 아이템을 띄우고 평소에는 숨기기 위해서

menu-1 > ul ul으로 2번째 ul부터는 모두 poisition:absolute; display:none;을 가지고 있어야 한다.

2차 메뉴아이템이하를 hover했을때 바로 밑에 있는 아이템박스(ul)만 display: block로 보이기 위해서

.menu-1 ul > li:hover > ul 를 사용한다.

모든 메뉴가 hover되었을 때에 배경색과 font 색상을 바꾸기 위해서

.menu-1 ul > li:hover > a 에 color: white; background-color: black;를 사용

모든 1,2,3차 메뉴의 크기가 동일하다고 가정할 시에

.menu-1 ul > li > a 에 width, padding , display: block;를 기입.