CSS从无显示过渡到显示块，使用subnav导航

CSS从无显示过渡到显示块，使用subnav导航

如您所知，

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>