Html CSS下拉菜单中的图像动画

我有一个下拉菜单，第一级有图像，然后是文本。当用户将鼠标移到图像上时，图像会略微变换为梯形（旋转），并弹出菜单。但是当用户将鼠标移动到菜单时，图像会返回到正方形。我希望它保持梯形，直到用户移动鼠标离开图像和菜单。任何帮助都将不胜感激，最好只使用CSS+HTML，因为我已经为此痛苦了很长时间

---

田

我猜你的意思是歪肉。我同意Danko的评论，即在主菜单项中添加

：hover

这里有一个

将此（或类似）标记用于子菜单中的菜单项：

<li class="menu-item"><a href="#"><img src="http://placekitten.com/100/40/"></a>
    <ul class="sub-menu">
        <li><a href="#">Sub Menu Item 1</a>
        </li>
        <li><a href="#">Sub Menu Item 2</a>
        </li>
        <li><a href="#">Sub Menu Item 3</a>
        </li>
    </ul>
</li>

---

请添加您的代码。。。我想您可以将：hover委托给父对象，但这取决于您的结构库！不，我确实在另一个div中使用rotateY，但是是的，您的解决方案有效。

.menu-item:hover > a {
    -webkit-transform: skewY(10deg);
    transform: skewY(30deg);
}