下拉菜单过渡效果

一、下拉菜单没有过度效果

1、直接设置下拉菜单弹出。

A、效果：

 

 

如图，下拉直接出现。主要代码如下：

 设置下拉效果：1、先设置一个块，用display：none；让它先消失。

                           2、再用鼠标悬停hover，就display：block；显示。

二、过度效果

效果如图：

 

 主要css代码如下：

设置下拉过渡效果：1、先设置一个块，不设置高

        2、hover悬停，在元素中设置高

注：只有块不设置高，鼠标悬停在设置元素高才能有过渡效果。

p{
				height: 0px;
				overflow: hidden;
			}
			div ul li:hover p{
				/* display: block; */
				height: 200px;
				/* 过度 */
				transition: all 3s; 	
			}