一个纯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部分：

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

动画效果大概是鼠标放上去之后，从下往上慢慢提起来。比较重要是属性是“visibility”，才发现visibility可以这么用...

推荐阅读：

使用flexible后 不同设备的data-dpr还始终为1解决方法

CSS3中元素背景的 gradient 渐变属性

利用css中的伪类 给元素设置特殊样式效果

给网站添加熊掌号粉丝关注按钮

分享一些实用的Chrome DevTools技巧