网站首页导航栏移入移出动画（一）slideDown、slideUp

闲暇时间浏览别的网站发现首页导航栏有一个比较友好的动画，鼠标移入导航菜单，菜单item下拉内容缓慢显示，移出则迅速拉起消失，于是想着自己试着实现下。

首先想到元素hover，上代码。

<style>
    .ul>li:hover>.news{
            display: block;
     }
     .news{
            display:none;
            background: green;
            border-radius: 10px;
            overflow: hidden;
      }
      .news>ul>li:not(:last-child){
            border-bottom: 1px solid gray;
      }

</style>
<ul class="ul">
        <li>
            <a href="">新闻业务</a>
            <div class="news">
                <ul>
                    <li><a href="">集团动态</a></li>
                    <li><a href="">专题报道</a></li>
                    <li><a href="">品牌专类库</a></li&g