使用图像作为菜单：内部动画 div

Question

我希望将图像动画化为菜单。 当悬停在图像的某个部分时，会出现一个菜单列表。 我是一个新手编码员，所以我在必须使用的过程中有点迷茫（图像映射、精灵、js...）。

这是我正在努力实现的工作：

JSFiddle

Menu Equipiece
但是，菜单不会出现在滚轮上。

我在它工作的地方进行了先前的测试：

JSFiddle

CSS

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

Answer 1

您应该将 div#menu 放在 div#roue 中，它会起作用。我对 fiddle 进行了更新，您可以看到 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>

使用图像作为菜单：内部动画 div

Using an image as menu : animation inside div

html

css

image

animated

drop-down-menu

JSFiddle

JSFiddle

CSS