首先这里用到的知识是transition
过渡：从一种样式逐渐改变为另一种的样式效果
从图来看，是高度发生了变化，
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><meta name="description" content=""><meta name="keywords" content=""><link rel="stylesheet" href=""><style>*{padding: 0;margin: 0;}a{text-decoration: none;}.nav{width: 320px;height: 50px;margin: 50px auto;}.nav li{float: left;width: 100px;height: 50px;margin-right: 10px;background-color: pink;line-height: 50px;text-align: center;}.nav .mr0{margin-right: 0;}.nav li a{display: block;width: 100%;height: 100%;color: #fff;font-size: 20px;}.nav > li:nth-child(2){position: relative;}.nav .list{position: absolute;overflow: hidden;/*必须用overflow,不然内容会挤出去，就算设置高度为零也没意义*/top: 50px;left: 0;height:0;transition: 1s;}.nav > li:nth-child(2):hover .list{height: 200px;}}</style></head><body><ul class="nav"><li><a href="">首页</a></li><li><a href="">衣服</a><ul class="list"><li><a href="">夹克</a></li><li><a href="">衬衫</a></li><li><a href="">羽绒服</a></li><li><a href="">毛线衣</a></li></ul></li><li class="mr0"><a href="">裤子</a></li></ul></body></html>
下面具体谈谈transition 样式的一种变化，需要注意的是transition不会自己变化，需要配合hover才能变化
1属性
transition-property想要过渡的属性名称，不写就是过渡全部
transition-duration过渡花费的时间
transition-delay 延迟时间，过一下再过渡
transition-timing-function速度曲线 ease(默认，慢速开始，然后加快，结束变慢) linear(匀速) ease-in(规定以慢速开始的效果) ease-out(慢速结束的过渡效果) ease-in-out(慢速开始和结束的过渡效果) ease-in-out和ease的区别是中间加速不一样
复合属性：名称，花费的时间 速度 延迟时间；中间为空格
2transition
能过渡的属性：（想要谁过渡，就在谁原始身上加，不要在变换后加，不能在写hover时加）大小，颜色，透明度，背景图片（有点特殊，是原来图片变淡，另一个图片出来，类似透明度，一般不使用）
不能过渡的属性：display
想要hover后，元素慢慢显示，
如果仅仅是visibility+transition,那么开始和display一样是立即显示，但是和display不一样的是，display在鼠标撤离元素没hover时立即消失，而visibility会过段时间消失
visibility:hidden和display:none的区别
display:none是完全消失，页面hover不到，并且造成其他属性没有效果
visibility:hidden也是消失，但是存在于页面上，也hover不到，并不会影响别的属性。一般配合opacity和position使用，即要从消失到可以慢慢显现，必须用visibility而不是display
如果觉得《菜单下拉列表怎么实现慢慢出现效果-----过渡（transition）》对你有帮助，请点赞、收藏，并留下你的观点哦！
