<nav id="gnb">
  <menu>
    <li class="gnb on"><a href="#"><img src="a01_off.png" onmouseover="this.src='a01_off_on.png'" onmouseout="this.src='a01_off_off.png'"></a>
      <ul class="submenu">
        <li class="on"><a href="#"><img src="b01_off.png"></a></li>
      </ul>
    </li>
    <li class="gnb on"><a href="#"><img src="a02_off.png" onmouseover="this.src='a02_off_on.png'" onmouseout="this.src='a02_off_off.png'"></a>
      <ul class="submenu">
        <li class="on"><a href="#"><img src="b02_off.png"></a></li>
      </ul>
    </li>
  </menu>
</nav>

이런 메뉴바가 있습니다.

js 파일에 관련된 부분이 아마도 이부분인거 같습니다.

$(document).ready(function() {

// gnb
$("#gnb li.gnb").hover(function() {
$("#gnb .submenu").hide();
$(this).find(".submenu").slideDown();
}, function() {
$("#gnb .submenu").slideUp();
});
});

그런데 이건 그냥 서브메뉴 슬라이드 부분인거 같고, 제가 표현하고 싶은건 마우스가 서브메뉴에 가도 상위 메뉴 이미지가 _on.png로 유지되는 스크립트를 작성하고 싶습니다.

// gnb
$("#gnb li.gnb ul.submenu").hover(function() {
$(this).parent().parent("img").attr("src", $(this).parent().parent("img").attr("src").replace("_off", "_on"));
});

이렇게 해봤는데 도저히 안되더라구요..

고수님들 조언 부탁드립니다.