本文章介绍，搭建网站时打造一个纯html+css写的下拉导航动画，代码非常简单实用效果。
代码如下：
<div class="nav"> <ul class="clearfix"> <li><a href="#">自定义1</a></li> <li><a href="#">自定义1</a></li> <li> <a href="#">自定义1</a> <ul> <li><a href="#">自定义2</a></li> <li><a href="#">自定义2</a></li> <li><a href="#">自定义2</a></li> </ul> </li> <li><a href="#">自定义1</a></li> <li> <a href="#">自定义1</a> <ul> <li><a href="#">自定义2</a></li> <li><a href="#">自定义2</a></li> <li><a href="#">自定义2</a></li> </ul> </li> <li><a href="#">自定义1</a></li> <li><a href="#">自定义1</a></li> </ul></div>
css代码部分如下：
.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;}动画效果大概是鼠标放上去之后，从下往上慢慢提起来。比较重要是属性是“visibility”，用visibility做的效果，相当不错，可以试试看。
