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

　　

http://www.cnblogs.com/xiaxiani/p/9053923.html】 

转载于:https://www.cnblogs.com/xiaxiani/p/9054942.html