纯CSS实现导航栏下拉动画效果

实现思路

导航栏的下拉效果通过在ul的li里再嵌套一个ul，再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。
实现效果：

HTML代码

<div class="nav">
			<ul>
				<li>
					<a href="#">奥利给a>
					<ul class="son">
						<li><a href="#">雷霆嘎巴a>li>
						<li><a href="#">哈拉少a>li>
						<li><a href="#">Giaoa>li>
					ul>
			    li>
				<li>
					<a href="#">吃惊a>
					<ul class="son">
						<li><a href="#">我的天a>li>
						<li><a href="#">假的吧a>li>
						<li><a href="#">嘻嘻a>li>
					ul>
				li>
				<li>
					<a href="#">卧槽a>
					<ul class="son">
						<li><a href="#">哈哈a>li>
						<li><a href="#">无情a>li>
						<li><a href="#">哈喽a>li>
					ul>
				li>
				<li>
					<a href="#">有趣a>
					<ul class="son">
						<li><a href="#">做梦a>li>
						<li><a href="#">想你a>li>
						<li><a href="#">每一天a>li>
					ul>
				li>
				
		div>

CSS