隐藏主导航后的子菜单

Question

我正在尝试创建一个子菜单transition，这是光滑和整洁。我在寻找解决这个问题的最佳方法上遇到了一些麻烦。

这是基本的菜单结构。

我是什么是子菜单不显示，然后"成长"到主要的nav。这就是我想要的菜单显示，而隐藏。正如你所看到的，标题折叠了，子菜单看不见了。

不幸的是，一个不能transition的display属性，所以我一直在尝试一些技术。到目前为止，这是我所期望的最接近的结果。正如你所看到的，这不是最优的，子菜单只是坐在主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
}