今天鸿硕开发一个主题的菜单时，由于下拉菜单比较简单，就不想使用js来搞了，直接CSS隐藏加过渡效果来实现，代码如下：
nav>ul>li .sub-menu{display: none;position: absolute;top: 60px;transition: top .4s;text-align: center;}nav>ul>li:hover .sub-menu{position: absolute;display: block;top: 40px;}
搞来搞去没有办法实现过渡效果，直接就是显示隐藏的效果，根本没有过渡。也尝试了使用transform:translateY(-20px),同样没有效果。
最后结合网文，发现display和transition会有冲突，要想有transition的过渡效果就不能使用display。
大概的原因为：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。
目前的解决方案为：
使用visibility替代display
visibility:hidden的时候元素仍然存在于文档流中，同时opacity对应的数值0，visibility:visible时opacity对应的数值1，transition属性可以对在opacity0～1之间进行过渡。
鸿硕亲测可以实现的代码如下：
nav>ul>li .sub-menu{visibility: hidden;position: absolute;top: 60px;transition: top .4s;text-align: center;}nav>ul>li:hover .sub-menu{visibility: visible;top: 40px;position: absolute;}
找了好久，总算找到解决方案了，感谢
客气了哈，共同学习。