一个纯HTML+CSS写的下拉导航动画

<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>

ul,li{
    list-style: none;
}

.nav {
    background-color: #404553;
    height: 40px;
}

.nav li {
    position: relative;
    float: left;
}

.nav li a {
    display: block;
    line-height: 40px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
}

.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;
}