I am looking to animate an image as a menu. When hovering some part of the image , a menu list appears. I'm a newbie coder so I'm a bit lost in the process i must use (image mapping, sprites, js...).

Here is the work I'm trying to achieve :

JSFiddle

Menu Equipiece
However, the menu does not appears hovering the wheels.

I made a previous test where it is working :

JSFiddle

Test

CSS

.roue{
position:absolute;
z-index:2;
margin-top:-200px;
margin-left:265px;
transition:all 0.5s ease;}

You should put the div#menu inside the div#roue and it'll work. I made an update on the fiddle and you could see here.

<div class="roue">
    <div>
        <img src="http://www.equipiece.com/userfiles/www.equipiece.com/images/Remorque-roue.png?ts=1450481525803" alt="roue de remorque" width="90" height="90">
    </div>

    <div id="menu">
        <ul id="list">
            <li><a href="http://www.equipiece.com/cat-roues-85_0-87_0_0_0.htm">Roue complète</a></li>
            <li><a href="#">Jantes</a></li>
            <li><a href="#">Pneus</a></li>
            ...
        </ul>
    </div>
</div>