Меню-картинка с открывающимся списком-текстом

[Shevskay]

Здравствуйте, подскажите пожалуйста, как сделать из такого меню так, чтобы при наведении мышкой на картинку (или нажатии) открывался бы вниз многоуровневый список?

Вот html код создаваемого меню:

<td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="1024" height="223">
 <tr>
   <td>
	  <table border="0" cellpadding="0" cellspacing="0"align="left"><tr><td background="images/1_1.jpg" border="0" width="136" height="78"></td></tr><tr><td background="images/1_2.jpg" border="0" width="136" height="74"></td></tr><tr><td background="images/1_3.jpg" border="0" width="136" height="71"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/2_1.jpg" border="0" width="140" height="78"></td></tr><tr><td background="images/2_2.jpg" border="0" width="140" height="74"></td></tr><tr><td background="images/2_3.jpg" border="0" width="140" height="71"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/3_1.jpg" border="0" width="74" height="78"></td></tr><tr><td background="images/3_2.jpg" border="0" width="74" height="74"></td></tr><tr><td background="images/3_3.jpg" border="0" width="74" height="71"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/4_1.jpg" border="0" width="86" height="78"></td></tr><tr><td background="images/4_2.jpg" border="0" width="86" height="95"></td></tr><tr><td background="images/4_3.jpg" border="0" width="86" height="50"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/5_1.jpg" border="0" width="101" height="92"></td></tr><tr><td background="images/5_2.jpg" border="0" width="101" height="99"></td></tr><tr><td background="images/5_3.jpg" border="0" width="101" height="32"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/6_1.jpg" border="0" width="99" height="110"></td></tr><tr><td background="images/6_2.jpg" border="0" width="99" height="98"></td></tr><tr><td background="images/6_3.jpg" border="0" width="99" height="15"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/7_1.jpg" border="0" width="98" height="95"></td></tr><tr><td background="images/7_2.jpg" border="0" width="98" height="99"></td></tr><tr><td background="images/7_3.jpg" border="0" width="98" height="29"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/8_1.jpg" border="0" width="84" height="69"></td></tr><tr><td background="images/8_2.jpg" border="0" width="84" height="83"></td></tr><tr><td background="images/8_3.jpg" border="0" width="84" height="71"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/9_1.jpg" border="0" width="96" height="99"></td></tr><tr><td background="images/9_2.jpg" border="0" width="96" height="64"></td></tr><tr><td background="images/9_3.jpg" border="0" width="96" height="60"></td></tr></table>

	  <table border="0" cellpadding="0" cellspacing="0" align="left"><tr><td background="images/10_1.jpg" border="0" width="110" height="78"></td></tr><tr><td background="images/10_2.jpg" border="0" width="110" height="72"></td></tr><tr><td background="images/10_3.jpg" border="0" width="110" height="73"></td></tr></table> 
   </td>
 </tr>
</table>
</td>

Пример многоуровнего меню, но без картинок css файл:

/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{
	margin:0; padding:0;
	background:#BC262C url(images/header_menu_bg.gif) repeat-x;
	min-height:27px;
	width:100%;
	list-style:none;
	font-size:11px;
	float:left;
	/*font-size:90%*/
}

#horizontal-multilevel-menu
{

}

/*Links*/
#horizontal-multilevel-menu a
{
	display:block;
	padding:5px 10px;
	/*padding:0.3em 0.8em;*/
	text-decoration:none;
	text-align:center;
}

#horizontal-multilevel-menu li 
{
	float:left;
}

/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
	color:#fff;
	font-weight:bold;
	padding:7px 12px;
}

/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
	background:#fc8d3d;
	color:#fff;
	font-weight:bold;
	padding:7px 12px;
}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
	background:#e26336;
	color:#fff;
}

/*Item-parents*/
#horizontal-multilevel-menu a.parent
{
	background: url(images/arrow.gif) center right no-repeat;
}

/*Denied items*/
#horizontal-multilevel-menu a.denied
{
	background: url(images/lock.gif) center right no-repeat;
}

/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover
{
	background:#D6D6D6;
	color:#fff;
}

/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected
{
	background:#D6D6D6;
	color:#fff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
	position:absolute;
	/*top:-999em;*/
	top:auto;
	display:none;
	z-index:500;

	height:auto;
	/*width:12em;*/
	width:135px;
	background:#F5F5F5;
	border:1px solid #C1C1C1;
}

/*Sub-menu item box*/
#horizontal-multilevel-menu li li 
{
	width:100%;
	border-bottom:1px solid #DEDEDE;
}

/*Item link*/
#horizontal-multilevel-menu li ul a
{
	text-align:left;
}

/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a
{
	color:#4F4F4F;
	font-weight:bold;
}

/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a
{
	color:#4F4F4F;
}

#horizontal-multilevel-menu li ul ul
{
	margin:-27px 0 0 132px;
	/*margin:-1.93em 0 0 11.6em;*/
}

#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul
{
	/*top:-999em;*/
	display:none;
}

#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul
{
	/*z-index:1000;
	top:auto;*/
	display:block;
}

div.menu-clear-left
{
	clear:left;
}

визуально такое меню выглядит так:

возможно ли с таким css меню сделать задуманное?

Буду рада любым рекомендациям, подсказкам.

Edited March 15, 2010 by Shevskay

[rus]

Наведение на объект и нажатие на него - две разные вещи, да и делаются двумя разными способами.

Наведение - просто hover в css.

Нажатие - событие в js.

[Shevskay]

Наведение на объект и нажатие на него - две разные вещи, да и делаются двумя разными способами.

Наведение - просто hover в css.

Нажатие - событие в js.

Спасибо, rus, за подсказку, наведение на картинку это лучший вариант, тем более оказывается можно сделать средствами css.

Edited March 15, 2010 by Shevskay