css를 이용해서 hover dropdown 메뉴 만들기

자바스크립트를 사용하지 않고 css를 이용해서 버튼에 갖다대면 서브 메뉴가 나오는 dropdown 메뉴를 만들어보겠습니다.

 

dropdown 메뉴  만들기

 

See the Pen hover dropdown menu by Cho-YoungHo (@choyoungho-web) on CodePen.

 

버튼에 초록색 배경에 하얀색 글자를 적용했고 버튼 선을 없앴습니다. 또한 마우스를 버튼에 갖다대면 #3e8e41의 배경색이 적용됩니다. dropdown 클래스에 인라인 블록 요소를 줘서 버튼에 갖다대면 서브메뉴가 나오도록 했습니다. 만약 inline-block을 주지 않으면 button에 위치한 너비가 100%가 되어 버튼 바깥쪽에 갖다대도 서브메뉴가 나옵니다.

 

서브메뉴는 기본적으로 나오지 않게 하고 마우스가 버튼에 갖다댔을 때 나오도록 설정했습니다. 따라서 display에 none을 주고 박스에 그림자효과를 주었습니다. 

 

이렇게 간단하게 마우스가 버튼에 갖다대면 서브메뉴가 나오는 방법을 알아보았습니다. 감사합니다.