A pure html+css drop-down navigation animation effect

This is a pull-down navigation animation written by pure html+css, which Tianxing Studio has struggled with. The code is as follows.

Html part:

 <div class="nav">     <ul class="clearfix"> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li>         <li> <a href="#">Customize</a>             <ul> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li>             </ul>         </li> <li><a href="#">Customize</a></li>         <li> <a href="#">Customize</a>             <ul> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li>             </ul>         </li> <li><a href="#">Customize</a></li> <li><a href="#">Customize</a></li>     </ul> </div>

Css part:

 .nav{background-color:#404553;} .nav li{position:relative;float:left;} .nav li a{display:block;line-height:40px;padding:0 20px; color:#fff;} .nav li ul{position:absolute;left:-20px;top:60px;background-color:#404553;-webkit-transition:all .4s;- moz-transition:all .4s;- o-transition:all .4s; transition:all .4s; z-index: 0; opacity: 0; visibility: hidden} .nav li ul li a{white-space: nowrap;line-height:30px;} .nav li:hover ul{top:40px;padding:6px 0; opacity:1;visibility:visible;}

The animation effect is about to be raised slowly from bottom to top after the mouse is placed on it. It is important that the attribute is "visibility". It is found that visibility can be used like this