css写的导航栏动画
html
<ul class="nabmenu fl"> <li><a href="#">首页</a></li> <li > <a href="#">高校合作</a> <ul> <li><a href="#">高校合作</a></li> <li><a href="#">gfgfg</a></li> <li><a href="#">ooii</a></li> <li><a href="#">gfgf</a></li> </ul> <li > <a href="#">高校合作</a> <ul> <li><a href="#">高校合作</a></li> <li><a href="#">gfgfg</a></li> <li><a href="#">ooii</a></li> <li><a href="#">gfgf</a></li> </ul> </li> <li > <a href="#">高校合作</a> <ul> <li><a href="#">高校合作</a></li> <li><a href="#">gfgfg</a></li> <li><a href="#">ooii</a></li> <li><a href="#">gfgf</a></li> </ul> </li> <li > <a href="#">高校合作</a> <ul> <li><a href="#">高校合作</a></li> <li><a href="#">gfgfg</a></li> <li><a href="#">ooii</a></li> <li><a href="#">gfgf</a></li> </ul> </li> </ul>
css
.nabmenu>li{ width: 100px; text-align: center; float: left; position: relative; } .nabmenu li:hover ul li { height: 36px; } .nabmenu li ul { position: absolute; left: 0; top: 36px; z-index: 1; } .nabmenu li ul li { overflow: hidden; height: 0; -webkit-transition: height 200ms ease-in; -moz-transition: height 200ms ease-in; -o-transition: height 200ms ease-in; transition: height 200ms ease-in; }