2텝스 메뉴를 구성하려고 합니다.
상위 메뉴는 이미지로 되어 있고 하부 메뉴는 텍스트로 되어 있는 2텝스 메뉴요.
여기서 상단 이미지에 onmouse할때 롤오버되어 다른 이미지가 보여지고 클릭시 텍스트 메뉴가 display되면 되는데...롤오버 이미지를 적용하는거까지는 했는데 롤어버된 이미지를 클릭했을태 하부 텍스트 메뉴가 display이 되려면 아래 소스를 어떻게 수정해야 할까요??
답변 부탁드립니다.


<table cellpadding="0" cellspacing="0" border="0" width="67">
  <tr height="28">
    <td></td>
  </tr>
  <tr>
    <td><A HREF="#" class="nlink"><img src="job_left_a.gif" border="0" name="img01" onMouseOver="document.img01.src='job_left_a1.gif'" onMouseOut="document.img01.src='job_left_a.gif'" vspace="1"></A></td>
  </tr>
  <tr>
    <td>
      <div id="1" style="DISPLAY:none">
        <table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td style="padding: 10 0 10 32"> <A HREF="#" class="nlink">메뉴1</A><br>
              <A HREF="#" class="nlink">메뉴2</A><BR>
              <A HREF="#" class="nlink">메뉴3</A><br>
              <A HREF="#" class="nlink">메뉴4</A><br>
              <A HREF="#" class="nlink">메뉴5</A><br>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>