[html,css] 드롭다운 네비게이션 (block)

See the Pen Untitled by flowerdragon95 (@flowerdragon95) on CodePen.

결과물을 보고싶으면 html , css를 더블클릭하여 지우고 result 탭에서 0.5X 클릭하여 확인

 

 

 

네비게이션 드롭다운 메뉴를 만들때는

 

1. 드롭다운으로 표시될 submenu ,  평소에 보이는 a 태그 박스관계를 잘 살피자

 

2. submenu는 평상시에는 display:none;옵션을 통해 보이지 않도록 설정한다.

 

3. menu와 submenu의 조상인 li에 hover 옵션을 준다 (hover시에 submenu는 display:block) 

    (커서가 submenu로 옮겨갈때도 드롭다운 메뉴가 꺼지지 않도록)