Html 悬停父元素时，在子元素上触发转换

我有一个菜单，我想用css3制作它的动画。当您将鼠标悬停在主菜单上时，我想滑入子菜单。但是，我不知道将

transition

属性放置在何处，以使其同时具有动画效果

下面是一个它正常工作的示例，但仅限于在悬停时

但当我结束悬停时，它只是突然停止，而不是向上滑动

我试着将

转换

放在

#sub

元素上，但是什么也没发生

以下是css：

#main {
    position: relative;
    height: 110px;
    width: 100%;
    background-color: red;
}

#sub {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: green;
    margin-top: -100px;
    z-index: -10;
    //If transition is put here, nothing happens
}

#menu:hover > #sub {
    margin-top: 0;
    transition: margin-top 0.5s ease;
}

和HTML：

<nav>
    <div id="menu">
        <div id="main">MAINMENU</div>
        <div id="sub">SUBMENU</div>

    </div>

</nav>

主菜单
子菜单

您是否尝试使用正确的供应商前缀添加转换

-webkit-transition: margin-top 0.5s ease;
-moz-transition: margin-top 0.5s ease;
-o-transition: margin-top 0.5s ease;
transition: margin-top 0.5s ease;

只是一个想法

在元素本身上设置转换，以便在取消覆盖时，它也会返回到原始状态并进行转换

#menu > #sub {
    transition: margin-top 0.5s ease;
}

---

这是我的Chrome浏览器上的一个bug。该代码在IE11、Firefox和Chrome Canary上按预期工作。其他用户无法在他们的Chrome版本上复制该漏洞。

您确定没有犯错误、输入错误或类似的错误吗？因为这是工作良好，并有<代码>过渡：保证金顶部0.5s的缓解被放置在

//如果将转换放在这里，则不会发生任何事情

@LongInt:正确的位置仅在

#子部分

上。如果你没有犯任何其他错误，它应该会起作用。这是一个样本，对我不起作用。在最新的Chrome上，Windows7。但它在Firefox和IE中确实有效。。。。那一定是Chrome版本了。@LongInt:我正在使用最新的Opera，它也使用Webkit，所以我很惊讶它在Chrome上不起作用。刚才在Windows 8.1上检查了最新的Chrome版本（版本42.0.2300.2 dev-m），它确实起作用了。你的问题示例只显示了一种方式，我的答案中的例子是双向滑动还是完全不双向滑动？在发布问题之前，我已经尝试过你的解决方案（正如我在代码中指出的）。你的代码在我的Chrome浏览器上不起作用（但在所有其他浏览器上都不起作用）——这就是为什么我断定是我的浏览器，它的行为很奇怪。