[CSS]커서 올리면 메뉴 스르륵 보이기 / 반응형 사이드바, 드롭다운 메뉴

커서 올리면 메뉴 스르륵 보이기 / 반응형 사이드바, 드롭다운 메뉴

저번에 포스팅한게 형편없어서 다시 정리해서 올림

 

---

1. 메뉴(ul)와 서브메뉴(ul)의 li에 inline-block으로 가로정렬해주기

 

메뉴 밑에 border 까지가 헤더영역

 

ul이 아닌

li에 지정

 

 

 

 

2. position:absolute

서브메뉴 ul에 position:absolute 적용
서브메뉴의 부모는 바로 위 메뉴 ul의 li다



이거 다시 정리해서 올릴거

3. 서브메뉴 박스 크기 지정

 

inline-block에 height:200px

너비가 화면에 꽉차도록 할려면
width:100vw

왼쪽 무슨일

서브메뉴 박스는 부모요소(li) 시작점 부터 시작하기때문에 왼쪽에 공백이 생겨버림
이때 left:0 을 지정해서 박스를 왼쪽 끝까지 당겨버리자

쨘

4. 박스 안보이게

(1) 서브메뉴 height: 0 지정

 

(2) overflow:hidden 지정

  (자식요소 안보이게 설정)

서브메뉴 완전 사라짐

5. 커서 올리면 스르륵 효과

부모요소 :hover .자식요소
height : 200px

-> new에 커서를 올리면 new의 하위메뉴 (높이200px) 나타나

---

(?)

메뉴 밑에 border 까지가 헤더영역

 

연두색이 사이드바 영역

사이드메뉴바는 숨겨져있기 때문에 header영역 (눈에보이는 영역)에는 포함되지 않는다.