[MyBordOf]

Здравствуйте! у меня меню из картинок и ссылок.
При наведении курсором на ссылку, выпадает подменю. Как сделать, чтоб при наведении на картинку выпадало ЭТО ЖЕ подменю?
это можно сделать только с помощью JS?
как мне правильно прописать функцию к данному коду?
Код HTML:

<table class="menu_table"> 
<tr class="menu_table_tr_1"> 
<td class="yacheyka"><a href="/" class="r1"></a></td> 
<td class="yacheyka"><a href="/" class="r2"></a></td> 
<td class="yacheyka"><a href="/" class="r3"></a></td> 
</tr> 
</table> 
<ul class="menu"> 
 
<li class="menu_1"> 
<a href="/about">О КОМПАНИИ</a> 
<ul> 
<li> 
<a href="/">О НАС</a><br> 
</li> 
<li> 
<a href="#">ВАКАНСИИ</a><br> 
</li> 
<li> 
<a href="/" class="brd">ИСТОРИЯ</a> 
</li> 
</ul> 
</li> 
</ul>

Код CSS:

a.r1 { 
background: url(/elements/img/3.jpg) no-repeat; 
display: block; 
width: 150px; 
height: 85px; 
margin-left: 39px; 
} 
a.r1:hover { 
background: url(/elements/img/2.jpg) no-repeat; 
} 
a.r2 { 
background: url(/elements/img/5.jpg) no-repeat; 
display: block; 
width: 150px; 
height: 110px; 
margin-left: 20px; 
} 
a.r2:hover { 
background: url(/elements/img/4.jpg) no-repeat; 
} 
a.r3 { 
background: url(/elements/img/6.jpg) no-repeat; 
display: block; 
width: 88px; 
height: 66px; 
margin-left: 55px; 
} 
a.r3:hover { 
background: url(/elements/img/7.jpg) no-repeat; 
} 
li.menu_1 { 
float: left; 
margin-top: -39px; 
margin-left: 117px; 
font-size: 25px; 
font-weight: bold; 
z-index: 2; 
position: relative; 
 
} 
li.menu_1 ul { 
display: none; 
padding-left: 10px; 
margin-left: -13px; 
font-size: 18px; 
text-align: center; 
background-color: #2c417d; 
opacity: 0.9; 
width: 192px; 
height: 110px; 
} 
li.menu_1 ul li { 
border: 1px solid #fff; 
margin-left: -5px; 
width: 100%; 
display: block; 
border-left: none; 
border-right: none; 
border-top: none; 
padding: 7px 0; 
 
} 
li.menu_1:hover ul { 
display: block; 
position: absolute; 
} 
li.menu_1:hover ul li { 
float: none; 
} 
li.menu_1:hover ul li a { 
padding: 6px 0 8px; 
color: #fff; 
}