如您所知，
display仅在CSS中将该属性设置为动画时，它会覆盖
visibility和
opacity过渡。
解决方案…只是删除了
display属性。
nav.main ul ul { position: absolute; list-style: none; opacity: 0; visibility: hidden; padding: 10px; background-color: rgba(92, 91, 87, 0.9); -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms;}nav.main ul li:hover ul { visibility: visible; opacity: 1;}<nav > <ul> <li> <a href="">Lorem</a> <ul> <li><a href="">Ipsum</a> </li> <li><a href="">Dolor</a> </li> <li><a href="">Sit</a> </li> <li><a href="">Amet</a> </li> </ul> </li> </ul></nav>
