CSS drop down menu

평소에는  Products, Sales만 있는 상태이다가 Products에 마우스를 올리면 아래로 하위 메뉴가 나오게 하는 예제이다.

 

products에 마우스를 올린 상태

 

위와 같은 드롭다운 메뉴를 만들기 위해서 display, position을 활용한다. products의 자식 태그인 ul의 css 속성으로 display: none;으로 설정한다. 이후 products:hover ul{display: block} 을 하여 드롭다운 메뉴가 나타나게 한다.

드롭다운 메뉴의 position 속성은 absolute을 사용하여 나타났을 때 레이아웃에 영향을 안 미치도록 해야 한다.

 

위의 예제 코드는 다음과 같다.