隐藏主导航后面的子菜单？

Question

我正在尝试创建一个平滑而整洁的子菜单transition。我遇到了解决这个问题的最佳方法。

Here is the basic menu structure.

我的目的是让子菜单不显示然后“成长”。进入主nav。 This is how I want the menu to appear whilst hidden.正如您所看到的那样，标题会崩溃，子菜单也不可见。

不幸的是，我不能transition display属性，所以我一直在尝试一些技巧。到目前为止，this is the closest I have come to the desired result.正如您所看到的那样，这不是最优的，子菜单只是位于主nav的顶部。

有没有办法隐藏主nav背后的子菜单或更好的方法来解决这个问题？

Answer 1

指向http://jsfiddle.net/3dX3T/2/的链接很好，只需将代码更改为：

只需添加不透明度

.submenu {
    margin-top: -96px;
    transition: all 0.5s;
    opacity: 0; // fade out the element
}

.dd:hover .submenu {
    margin-top: 12px;
    opacity: 1; // fade in the element
}