[CSS] 메뉴바 2차메뉴 숨길 때 / 정리

 

2차메뉴 만들때 높이값은 overflow:hidden 으로 선언.

2차메뉴를 숨길때는  overflow:hidden 과 height:0; 같이 써서 숨겨야한다.

다시 나타날땐 2차메뉴의 높이값을 계산해서(line-height 값으로 높이줬으면 그렇게 계산) hover에 height: 값px를 적용해준다. 거기에 transition을 적용해서 스르륵 펼쳐지게 해준다. 

 

▶ 2차메뉴에 마우스가 올라갔을 때 배경 색이 바뀌게 할려면

hover를 a태그가 아닌 li에 적용해야한다. 마우스가 올라갔을 때 같이 글씨 색도 바뀌게 할려면 a랑 li랑 각각 따로 적용해줘야한다. 

.submenu li:hover {

  background-color: rgb(223, 241, 255);

}

 

▶ 1차메뉴에 마우스를 올렸을 때 전체 2차 메뉴들이 다 나오게 하기

nav > ul:hover > li .submenu{ }

= ul에 마우스를 올렸을 때(1차 메뉴에 마우스를 올렸을 때) 그 밑 자손 li 의 후손 .submenu들을 보여줘라 

submenu들을 후손으로 불러올때 후손 서브메뉴가 여러개니깐 전체 선택되는 것이다. 

 

▶ 1차메뉴에 마우스를 올렸을 때 해당하는 2차 메뉴들만 나오게 하기

nav > ul > li:hover .submenu{ }

= ul안의 li 에 마우스를 올렸을 때 그 안에 있는 서브메뉴를 보여줘라- 니깐 li의 해당하는 서브메뉴들만 선택된다.