<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml"><head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/><title>動畫菜單</title><style?type="text/css">*?{?margin:?0;?padding:?0;?font-size:?14px;?}a?{?color:?#333;?text-decoration:?none?}ul{?list-style:?none;?}.nav?{height:?30px;?border-bottom:?5px?solid?#F60;?margin-left:50px;?width:600px;}.nav?li?{?float:?left;?position:relative;?height:30px;?width:120px?}.nav?li?a?{?display:?block;?height:?30px;?text-align:?center;?line-height:?30px;?width:120px;?background:?#efefef;?margin-left:?1px;?}.subNav{?position:absolute;?top:30px;?left:0;?width:120px;?height:0;?overflow:hidden}.subNav?li?a{?background:#ddd?}.subNav?li?a:hover{?background:#efefef}</style><script?type="text/javascript"?src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script>$(function(){????var?curHeight?=?$(this).height();????$("li:has('ul')").hover(????????function(){????????????$(this).children("ul").animate({"height":curHeight},30);????????},????????function(){????????????$(this).children("ul").animate({"height":"0"},30);????????}????)})</script></head><body><ul?class="nav">????<li><a?href="#">一級菜單</a>????????<ul?class="subNav">????????????<li><a?href="#">二級菜單</a></li>????????????<li><a?href="#">二級菜單</a></li>????????????<li><a?href="#">二級菜單</a></li>????????????<li><a?href="#">二級菜單</a></li>????????</ul>????</li>????<li><a?href="#">一級菜單</a>????????<ul?class="subNav">????????????<li><a?href="#">二級菜單</a></li>????????????<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>????<li><a?href="#">一級菜單</a></li></ul></body></html>
