一个纯html+css的下拉导航动画效果

这是天兴工作室自己折腾的一个纯html+css写的下拉导航动画，代码如下。

html部分：

<div class="nav">
    <ul class="clearfix">
        <li><a href="#">自定义</a></li>
        <li><a href="#">自定义</a></li>
        <li>
            <a href="#">自定义</a>
            <ul>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义自定义</a></li>
            </ul>
        </li>
        <li><a href="#">自定义</a></li>
        <li>
            <a href="#">自定义</a>
            <ul>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义自定义</a></li>
            </ul>
        </li>
        <li><a href="#">自定义</a></li>
        <li><a href="#">自定义</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可以这么用...