html hover效果下拉个框,关于下拉菜单（CSS）中，“：hover”样式的设置问题？

各位大大，请帮忙解决一下这个问题，先谢谢！

由于之前的代码不是全部帖出，可能造成一点信息误解。

以下是针对这个问题另外写的代码：

.nav {

width: 50px;

height: 50px;

overflow:hidden;

background-color: #09F;

transition: all ease-in-out 2s 0s;

}

.nav:hover {

/* 指定高度 */

height: 500px;

}

---------------------------------------------------------------------------------------------------------

0000

0000

0000

0000

---------------------------------------------------------------------------------------------------------

现在问题就只有一个：

.nav:hover {height: 500px;}   会正常显示过渡效果；

.nav:hover {height: auto;}   则不会显示过渡效果。

由于.nav即不同的子级菜单的高度属性都不一定相同，所以不可能给每一个.nav设置hover样式。

那么如何能做到，.nav自动适应高度，又可以正常显示过渡效果呢？