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