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

html部分：

Markup

<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部分：

CSS

.nav{background-color:#404553;}
.navli{position:relative;float:left;}
.navlia{display:block;line-height:40px;padding:020px;color:#fff;}
.navliul{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}
.navliullia{white-space:nowrap;line-height:30px;}
.navli:hoverul{top:40px;padding:6px0;opacity:1;visibility:visible;}

本文链接：https://www.weguiding.com/css/394.html