[HTML/CSS] 반응형 메뉴 제작 (Hoverable Dropdown)

 

커서를 가져다대면 나타나는 메뉴를 제작하고 싶었다.

jquery나 js를 사용해야하는건지 머릿속이 복잡했다.

​

하지만 css만으로 가능했다.

How TO - Hoverable Dropdown

How TO - Hoverable Dropdown ❮ Previous Next ❯ Learn how to create a hoverable dropdown menu with CSS. Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Hover Me Try it Yourself » Create A Hoverable Dropdown Create a dropdown menu that appe...

www.w3schools.com

​

핵심은 디폴트로 display:none 이었다가, hover할 때 display:block으로 바꾸어주는 것이다.!!!

그리고 스크롤 내려보면 Right-aligned dropdown에 대한 설명도 있다.

​

position 값들이 헷갈려서 이 블로그를 참고하였다.

(추가로 z-index에 대한 설명도 있다.)

CSS position: absolute; 절대 위치

position: absolute; 는 지난번에 배운 것 같은데? 배웠는지 확인해보니 배웠다. 까먹었네. 지난 글 좀 보고 왔다. 까먹은거 모르는 거다. 다시 한번 해보자. 2019/11/19 - [웹코딩 배우기/· CSS] - CSS positio..

nilgi.tistory.com