Как можно реализвать подобное меню?

[DImaN]

Доброе время суток. помогите пожалуйста реализовать меню подобное тому, какое на данном сайте: http://www.fordvehicles.com/

я имею в виду именно о том раскрывающемся меню с пунктами "Ford now, cars и.т.д."

Простое раскрывающееся меню сделать можно конечно без проблем, но интересует как можно сделать так, чтобы при наведении на определенный пункт меню отображался свой имэйдж.

Спасибо за помощь

Edited November 4, 2008 by DImaN

[milax]

Оно сделано на флеш

[Иван Шумов]

Оно сделано на флеш

и что? это-же легко делается без него

[DImaN]

вот я о том же, что вполне можно сделать такое-же без флэша.. вот только как саму картинку впаять в раскрывающееся меню..

например вот немного кода:

<ul id="menu2">

	<li class="top"><a href="#nogo" class="top_link">Home</a></li>
	<li class="top"><a href="#nogo" class="top_link">Contacts<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
		<ul class="sub">
			<li class="subtop"><span><a href="#nogo">Support</a></span><b></b></li>
			<li class="fly"><span><a href="#nogo">Sales<!--[if gte IE 7]><!--></a></span><b></b><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><iframe></iframe><![endif]-->
									<li><span><a href="#nogo">Buying</a></span><b></b></li>
			<li><span><a href="#nogo">Photographers</a></span><b></b></li>
			<li><span><a href="#nogo">Stockist</a></span><b></b></li>
			<li class="subbot"><span><a href="#nogo">General</a></span><b></b></li>

		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>

вот фрагмент css кода:

#menu2 {padding:0; width:750px; margin:0; list-style:none; height:28px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; background:#000; border-bottom:1px solid #edb;}
#menu2 li.top {display:block; float:left;}

#menu2 li a.top_link {display:block; height:25px; float:left; line-height:22px; font-size:11px; font-weight:bold; padding:0 20px 0 10px; color:#edb; text-decoration:none; border-top:3px solid #000;}

#menu2 li a.top_link:hover {color:#d85; border-color:#a52;}

#menu2 li:hover > a.top_link {color:#d85; border-color:#a52;}

#menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu2 a:hover {visibility:visible; position:relative; z-index:200;}
#menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#menu2 ul, 
#menu2 :hover ul ul, 
#menu2 :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0; padding:0; list-style:none;}

#menu2 :hover ul.sub {left:0; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(trans.gif);}
#menu2 :hover ul.sub li {display:block; float:left; width:100%; height:25px;}
#menu2 :hover ul.sub li span {display:block; height:25px; float:left; width:90px; font-weight:normal;}
#menu2 :hover ul.sub li b {display:block; height:25px; float:left; width:30px; font-weight:normal;}

#menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:25px; width:120px; margin-right:-30px; line-height:25px; text-indent:10px; color:#edb; text-decoration:none; background:url(trans.gif);}

#menu2 :hover ul.sub li span a:hover {color:#f97;}

#menu2 :hover ul.sub li:hover > span a {color:#f97;}

#menu2 :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

#menu2 :hover ul.wide {width:150px;}
#menu2 :hover ul.wide li span {width:120px;}
#menu2 :hover ul.wide li a {width:150px;}

#menu2 :hover ul.narrow {width:90px;}
#menu2 :hover ul.narrow li span {width:60px;}
#menu2 :hover ul.narrow li a {width:90px;}

#menu2 :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{left:90px;}

#menu2 li > span {
background: url(tab-midleft.png);
}
#menu2 li > b {
background: url(tab-midright.png)
}
#menu2 li.fly > b {
background: url(tab-midright-sub.png)
}

#menu2 li.subtop > span,
#menu2 li.flytop > span { 
background:url(tab-topleft.png);
}
#menu2 li.subtop > b {
background:url(tab-topright.png);
}

#menu2 li.flytop > b {
background:url(tab-topright-sub.png);
}

#menu2 li.subbot > span,
#menu2 li.flybot > span {
height:35px !important; background:url(tab-botleft.png);
}

#menu2 li.subbot > b {
height:35px !important; background:url(tab-botright.png);
}
#menu2 li.flybot > b {
height:35px !important; background:url(tab-botright-sub.png);
}

Edited November 4, 2008 by DImaN

[milax]

и что? это-же легко делается без него

А я и не говорил, что это невозможно.

Способов много. Можно покопаться надо в инете. А здесь Вам его никто не напишет и не распишет, т.к. время — деньги.

[DImaN]

Ув. Иван Шумов, подскажите пжл, как это можно просто реализовать при помощи хтмл + цсс