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

html部分：

Markup

<divclass="nav">
<ulclass="clearfix">
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义</a></li>
<li>
<ahref="#">自定义</a>
<ul>
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义自定义</a></li>
</ul>
</li>
<li><ahref="#">自定义</a></li>
<li>
<ahref="#">自定义</a>
<ul>
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义自定义</a></li>
</ul>
</li>
<li><ahref="#">自定义</a></li>
<li><ahref="#">自定义</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;}