이게 개발자영역인지 디자이너 영역인지 잘몰라서 여기서 좀 여쭤보려고하는데요요 좀도와주세요..ㅠㅠ.

제가 서브메뉴바를 만들고있는데 마우스오버효과 주려고하는데 미치겠어요

여기 http://home.ilikeclick.com/service/recommend/sponsorad.html 서 보시는 서브메뉴에서 처럼

위치하는 패이지의 항목의 색깔를 다르게주고

다른 항목에 마우스오버했을시 현재페이지 항목의 색깔효과를 없게하고 다른항목에서 마우스아웃시 다시 현재페이지의 항목에 색깔효과를 주고싶거든요

지금 저사이트에서는 이미지인데 제가 만드려고하는 서브메뉴는 텍스트라서 css를 써야하는데 되게 헷갈리네요



보시면

     <table id="con"  border="0" cellspacing="0" cellpadding="0">
  <tr> <td>

<table  id='body_layout'><tr><td colspan='2'>
   </td></tr>
   <tr>
    <td>
                 
   <table   id='sub_menu'>
       <tr><td class='dir'>
      <dl>
       <dd  id="ex"><a href='#'>  test </a></dd>
     <dd id="ex2" onmousemove="mouseOver()" onmouseout="mou()"><a href='#'> test2 </a></dd>
    
이런식으로 짜여있구요

자바는

-----------------------

function mouseOver(){
document.getElementById("ex").className= ""; 
 
}

function mou(){
document.getElementById("ex").className = " "; 
  }

---------------------

이렇게되있는데요  ex에 클래스를 적용시키려니 테이블 구조가 너무복잡해서 어떻게 적어야될줄 모르겠어요

전에쓰던 소스는 그냥 마우스만 올라가면 색깔바뀌는 효과만줘서
소스가
------------
#sub_menu dd a{list-style: none; text-decoration: none;font-family: 'NanumGothicWeb';font-size:18px;color: #000000;}

#sub_menu dd a:hover {   list-style: none; text-decoration: none;font-family: 'NanumGothicWeb';font-size:18px;color:#002181;
 }
-----------

이렇게 됬었거든요
그런데 현재페이지 표시에다가 다른서브메뉴항목에 마우스오버를 하면
현재페이지의 항목에 컬러를 그냥 검정색으로 돌리려고하니 너무힘든거같아요ㅠㅠ
정말이거 어떻게해야하나요? 보통이런식으로 서브메뉴를 짜려면 어떤방식으로 짜는지 알고싶습니다 가르쳐주시면 정말감사하겠습니다
제발도와주세요 부탁드립니다ㅠㅠ..