마우스 오버 서브메뉴 block 채택완료
아래처럼 메뉴를 구성하였는데 마우스 오버시 <li class="gnb1">, <li class="gnb2">의 뒤에 on 이란 클래시가붙어서 <li class="gnb1 on">, <li class="gnb2 on">붙고 <div class="gnb-2dep" style="display: block;">하게해서 대메뉴에 마우스 오버시 서브메뉴가 보여지게 하고싶습니다.
스크립트로 해야하나요?
<li class="gnb1">대메뉴1
<div class="gnb-2dep" style="display: none;">서브메뉴1-1</div>
<li>
<li class="gnb2">대메뉴2
<div class="gnb-2dep" style="display: none;">서브메뉴2-1</div>
<li>
답변 3개
클래스를 붙이고 떼고 하는 것들은 스크립트 사용이 필요한 것이고,
CSS만을 이용할때는 메뉴 구조가 아래처럼 강제됩니다.
<ul id="menu">
<li>
<a href="#">메뉴1</a>
<ul class="sub_menu">
<li>
<a href="#">메뉴1-1</a>
</li>
</ul>
</li>
</ul>
#menu > li:hover > .sub_menu {display: block} 또는
#menu > li > a:hover + .sub_menu {display: block} 처럼 사용가능합니다.
전자가 호버시 배경색상 변경등이 연동될때 더 알맞은 방식이고요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인