导航栏制作出现的问题

记一次踩坑记录。今天独立制作vue项目(多人共享博客)中类似于导航栏效果的时候，有个问题花费了我许久时间才解决，最后发现原来这么简单，自己怎么这么蠢。。

是这样的，我需要实现的效果是鼠标悬浮在头像上时，头像下方会出现我的和注册导航栏。

image.png

html结构是这样的

      <div class="avater">
        <i class="edit el-icon-edit"></i>   
          <div class="user">  
            <img :src="user.avatar" alt=""> 
            <ul>
              <li><router-link to="/my">我的</router-link></li>
              <li><a href="#" @click="onLogout">注销</a></li>
            </ul>
          </div>
      </div>

我想的是既然是鼠标悬浮在头像上，然后就img:hover ul {display:hover}，结果没有效果。
后来查看以前制作的导航栏小demo，发现原来这个:hover必须得放在父元素上，也就是.user:hover ul {display:block}。这样才会出效果。