淡入淡出

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in-out;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

就是一个div 鼠标划上时 其下级 ul 会淡入淡出的方式呈现；