gnb 실습

 웹페이지에서 메뉴 부분에 hover 하게되면 아래쪽에 소메뉴들이 나오게 하는 방법에 대한 실습이다.

(1)

 - 소메뉴의 ul 부분이 display:none이었다가 대메뉴의 li 부분에 hover를 하게되면 display:block으로 해서 보이게 했고, 소메뉴는 position:absolute이기 때문에 아래쪽 내용부분의 크기에 간섭하지 않고 위에 표시되게 된다.

(2)

 - nav 태그의 height가 40px이었다가 hover하게 되면 200px로 늘어나고, overflow:hidden이기 때문에 40px을 넘는 내용에 대해서는 보이지 않다가 나타나는 방법이다.

 - nav 태그에 position:absolute 속성을 주어 위로 올리게 되면 contents 영역을 침범하지 않고 메뉴가 열리고 닫히게 된다.