[CSS] :hover를 이용한 슬라이드 3차 메뉴

 

A:only-child : A 엘리먼트는 그 부모의 유일한 자식

A:not(B) : B가 아닌(B속성을 가지지 않은) A만을 선택.

 

 

 

 

nav.menubar > ul > li > a:not(:only-child)::after{
  content:" [+]";
  font-size: 1.5rem;
}

nav.menubar > ul > li:hover > a:not(:only-child)::after{
  content:" [-]";

}

nav.menubar  ul.submenu > li > a:not(:only-child)::after{
  content:" [+]";
  font-size: 1rem;
}

nav.menubar  ul.submenu > li:hover > a:not(:only-child)::after{
  content:" [-]";

}

 

선택자를 활용해 자식이 없는 li의 after 에만 더보기 아이콘([+]) 을 추가하였다.