마우스 오버 서브메뉴 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로 처리가 가능합니다만.. 문제는 마우스 아웃되면 메뉴도 사라지게 됩니다.
고로 script를 사용하셔야 합니다.
css는 hover를 이용하시면 되겠습니다.
원하는 방식이나 위치에 따라 css만으로 처리 할 수도 js가 필요 할 수도 있습니다.
클래스를 붙이고 떼고 하는 것들은 스크립트 사용이 필요한 것이고,
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} 처럼 사용가능합니다.
전자가 호버시 배경색상 변경등이 연동될때 더 알맞은 방식이고요.
