css transition下拉动画效果实现

解决问题：

这个功能一般都在官网头部导航栏上看到的效果，鼠标放上去就下拉，鼠标离开就收缩。

唯一难点就是下拉的高度随内容变化，而不是固定的，下面就是解决方法。

代码如下：

<template>
  <div class="test">
    <div class="nav">
      <div class="mian_nav">
        <div class="logoIcon">
          <img src="" alt="logo" />
        </div>
        <div class="navList">
          <div class="navItem" v-for="(item,index) in navList" :key="index">{
  {item.name}}</div>
          <div class="drop-down">
            <div class="down_main">
              <div class="down_item" v-for="(ptem,pndex) in content" :key="pndex">{
  {ptem.text}}</div>
            </div>
          </div>
        </div