一个纯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;
}

标签： html css

赏

选择打赏方式

微信 支付宝 QQ钱包

打赏

打赏

打赏